feat: full redesign - sidebar layout, room tabs, device cards
All checks were successful
Deploy to Coolify / deploy (push) Successful in 3s
All checks were successful
Deploy to Coolify / deploy (push) Successful in 3s
This commit is contained in:
Cosmo
267
app/globals.css
267
app/globals.css
@@ -1,250 +1,65 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--bg: #090912;
|
|
||||||
--card-bg: rgba(255, 255, 255, 0.04);
|
|
||||||
--card-border: rgba(255, 255, 255, 0.08);
|
|
||||||
--text-primary: rgba(255, 255, 255, 0.95);
|
|
||||||
--text-secondary: rgba(255, 255, 255, 0.45);
|
|
||||||
--accent: #6366f1;
|
|
||||||
--accent-2: #8b5cf6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.light {
|
|
||||||
--bg: #f0f0f8;
|
|
||||||
--card-bg: rgba(255, 255, 255, 0.75);
|
|
||||||
--card-border: rgba(0, 0, 0, 0.07);
|
|
||||||
--text-primary: rgba(15, 15, 30, 0.95);
|
|
||||||
--text-secondary: rgba(15, 15, 30, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
:root {
|
||||||
body {
|
--bg: #0a0a14;
|
||||||
width: 100%;
|
--sidebar-bg: rgba(255, 255, 255, 0.02);
|
||||||
|
--card-bg: rgba(255, 255, 255, 0.05);
|
||||||
|
--card-border: rgba(255, 255, 255, 0.08);
|
||||||
|
--text-primary: rgba(255, 255, 255, 0.92);
|
||||||
|
--text-secondary: rgba(255, 255, 255, 0.45);
|
||||||
|
--accent: #00d4ff;
|
||||||
|
--accent-glow: rgba(0, 212, 255, 0.15);
|
||||||
|
--on-color: #00d4ff;
|
||||||
|
--off-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
touch-action: manipulation;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
#__next, main {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
touch-action: manipulation;
|
||||||
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
button:focus-visible {
|
||||||
background-color: var(--bg);
|
outline: 2px solid var(--accent);
|
||||||
color: var(--text-primary);
|
outline-offset: 2px;
|
||||||
font-family: 'Inter', system-ui, sans-serif;
|
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Glassmorphism card */
|
|
||||||
.glass-card {
|
|
||||||
background: var(--card-bg);
|
|
||||||
border: 1px solid var(--card-border);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
border-radius: 24px;
|
|
||||||
transition: background 0.3s ease, border-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom scrollbar */
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 4px;
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: rgba(99, 102, 241, 0.35);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Big toggle switch (60×32) */
|
::-webkit-scrollbar-thumb:hover {
|
||||||
.toggle-track {
|
background: rgba(255, 255, 255, 0.2);
|
||||||
position: relative;
|
|
||||||
width: 60px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-thumb {
|
|
||||||
position: absolute;
|
|
||||||
top: 3px;
|
|
||||||
left: 3px;
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: white;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
|
||||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-on .toggle-thumb {
|
|
||||||
transform: translateX(28px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom range slider */
|
|
||||||
input[type='range'] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 6px;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.light input[type='range'] {
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #f59e0b;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
|
|
||||||
transition: transform 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-webkit-slider-thumb:hover {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-moz-range-thumb {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #f59e0b;
|
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ambient orbs */
|
|
||||||
.orb {
|
|
||||||
position: fixed;
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(80px);
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* No select on interactive elements in tablet mode */
|
|
||||||
.no-select {
|
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Progress bar */
|
|
||||||
.progress-bar {
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: rgba(255, 255, 255, 0.07);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.light .progress-bar {
|
|
||||||
background: rgba(0, 0, 0, 0.07);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: linear-gradient(90deg, #6366f1, #8b5cf6);
|
|
||||||
transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Glow effects */
|
|
||||||
.glow-amber {
|
|
||||||
box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glow-blue {
|
|
||||||
box-shadow: 0 0 24px rgba(59, 130, 246, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glow-green {
|
|
||||||
box-shadow: 0 0 24px rgba(16, 185, 129, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glow-purple {
|
|
||||||
box-shadow: 0 0 24px rgba(139, 92, 246, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal backdrop */
|
|
||||||
.modal-backdrop {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.65);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
z-index: 100;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Spin animation for air purifier */
|
|
||||||
@keyframes spin-slow {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-slow {
|
|
||||||
animation: spin-slow 4s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Orb animations */
|
|
||||||
@keyframes orbMove1 {
|
|
||||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
||||||
33% { transform: translate(40px, -30px) scale(1.05); }
|
|
||||||
66% { transform: translate(-20px, 20px) scale(0.97); }
|
|
||||||
}
|
|
||||||
@keyframes orbMove2 {
|
|
||||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
||||||
33% { transform: translate(-50px, 30px) scale(1.08); }
|
|
||||||
66% { transform: translate(30px, -20px) scale(0.95); }
|
|
||||||
}
|
|
||||||
@keyframes orbMove3 {
|
|
||||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
||||||
50% { transform: translate(20px, 40px) scale(1.04); }
|
|
||||||
}
|
|
||||||
@keyframes orbMove4 {
|
|
||||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
||||||
50% { transform: translate(-30px, -20px) scale(1.06); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide scrollbar but allow scrolling */
|
|
||||||
.no-scrollbar {
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
.no-scrollbar::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Safe area support for tablets/mobile */
|
|
||||||
@supports (padding: max(0px)) {
|
|
||||||
body {
|
|
||||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure 100dvh works properly */
|
|
||||||
.h-dvh {
|
|
||||||
height: 100dvh;
|
|
||||||
height: 100svh;
|
|
||||||
}
|
}
|
||||||
|
|||||||
600
app/page.tsx
600
app/page.tsx
@@ -1,362 +1,312 @@
|
|||||||
"use client";
|
'use client'
|
||||||
|
|
||||||
import { useState, useCallback, useEffect } from "react";
|
import { useState, useEffect, useCallback } from 'react'
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import Sidebar from '@/components/Sidebar'
|
||||||
import TopBar from "@/components/TopBar";
|
import TopBar from '@/components/TopBar'
|
||||||
import BottomNav from "@/components/BottomNav";
|
import RoomTabs from '@/components/RoomTabs'
|
||||||
import LightCard from "@/components/cards/LightCard";
|
import DeviceCard from '@/components/DeviceCard'
|
||||||
import TemperatureCard from "@/components/cards/TemperatureCard";
|
|
||||||
import AirPurifierCard from "@/components/cards/AirPurifierCard";
|
|
||||||
|
|
||||||
import WeatherCard from "@/components/cards/WeatherCard";
|
type Tab = 'home' | 'rooms' | 'sensors' | 'settings'
|
||||||
import RoomsRow from "@/components/RoomsRow";
|
|
||||||
import { useHA, useWeather } from "@/hooks/useHA";
|
|
||||||
|
|
||||||
// Stagger container variants
|
interface WeatherData {
|
||||||
const containerVariants = {
|
temp: string
|
||||||
hidden: {},
|
desc: string
|
||||||
visible: { transition: { staggerChildren: 0.07 } },
|
humidity: string
|
||||||
};
|
windSpeed: string
|
||||||
|
feelsLike: string
|
||||||
|
forecast?: { date: string; maxTemp: string; minTemp: string; desc: string }[]
|
||||||
|
}
|
||||||
|
|
||||||
const cardVariants = {
|
interface SensorData {
|
||||||
hidden: { opacity: 0, y: 20 },
|
temperature: number
|
||||||
visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
|
humidity: number
|
||||||
};
|
pm25: number
|
||||||
|
}
|
||||||
|
|
||||||
export default function Home() {
|
interface HaStates {
|
||||||
const [isDark, setIsDark] = useState(true);
|
[key: string]: { state: string; attributes?: Record<string, any>; _mock?: boolean }
|
||||||
const [activeTab, setActiveTab] = useState("home");
|
}
|
||||||
const [roomFilter, setRoomFilter] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const { data: haData, loading: haLoading, refresh: refreshHA } = useHA(15000);
|
const ROOMS = [
|
||||||
const weather = useWeather();
|
{ id: 'living', name: 'Гостиная', emoji: '🛋️', deviceCount: 3 },
|
||||||
|
{ id: 'bedroom', name: 'Спальня', emoji: '🛏️', deviceCount: 2 },
|
||||||
|
{ id: 'kitchen', name: 'Кухня', emoji: '🍳', deviceCount: 0 },
|
||||||
|
{ id: 'bathroom', name: 'Ванная', emoji: '🚿', deviceCount: 0 },
|
||||||
|
]
|
||||||
|
|
||||||
// Apply theme to html element
|
const DEVICES_BY_ROOM: Record<string, {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
icon: string
|
||||||
|
entityId?: string
|
||||||
|
domain?: string
|
||||||
|
haKey?: string
|
||||||
|
isMock?: boolean
|
||||||
|
}[]> = {
|
||||||
|
living: [
|
||||||
|
{
|
||||||
|
id: 'air_purifier',
|
||||||
|
name: 'Очиститель воздуха',
|
||||||
|
icon: '💨',
|
||||||
|
entityId: 'fan.zhimi_rmb1_9528_air_purifier',
|
||||||
|
domain: 'fan',
|
||||||
|
haKey: 'fan.air_purifier',
|
||||||
|
isMock: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'light_living',
|
||||||
|
name: 'Свет',
|
||||||
|
icon: '💡',
|
||||||
|
entityId: 'light.living_room',
|
||||||
|
domain: 'light',
|
||||||
|
haKey: 'light.living_room',
|
||||||
|
isMock: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'tv',
|
||||||
|
name: 'Телевизор',
|
||||||
|
icon: '📺',
|
||||||
|
isMock: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
bedroom: [
|
||||||
|
{
|
||||||
|
id: 'light_bedroom',
|
||||||
|
name: 'Свет',
|
||||||
|
icon: '💡',
|
||||||
|
entityId: 'light.bedroom',
|
||||||
|
domain: 'light',
|
||||||
|
haKey: 'light.bedroom',
|
||||||
|
isMock: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'ac',
|
||||||
|
name: 'Кондиционер',
|
||||||
|
icon: '❄️',
|
||||||
|
isMock: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
kitchen: [],
|
||||||
|
bathroom: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const [tab, setTab] = useState<Tab>('home')
|
||||||
|
const [activeRoom, setActiveRoom] = useState('living')
|
||||||
|
const [weather, setWeather] = useState<WeatherData | null>(null)
|
||||||
|
const [sensors, setSensors] = useState<SensorData | null>(null)
|
||||||
|
const [haStates, setHaStates] = useState<HaStates>({})
|
||||||
|
|
||||||
|
// Load weather
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const html = document.documentElement;
|
const load = async () => {
|
||||||
if (isDark) {
|
try {
|
||||||
html.classList.add("dark");
|
const r = await fetch('/api/weather')
|
||||||
html.classList.remove("light");
|
const d = await r.json()
|
||||||
document.body.classList.remove("light");
|
if (d.temp && d.temp !== '—') setWeather(d)
|
||||||
} else {
|
} catch {}
|
||||||
html.classList.remove("dark");
|
|
||||||
html.classList.add("light");
|
|
||||||
document.body.classList.add("light");
|
|
||||||
}
|
}
|
||||||
}, [isDark]);
|
load()
|
||||||
|
const t = setInterval(load, 600_000)
|
||||||
|
return () => clearInterval(t)
|
||||||
|
}, [])
|
||||||
|
|
||||||
const states = haData?.states || {};
|
// Load HA states + sensors
|
||||||
const isDemo = haData?.demo || false;
|
const loadHA = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const r = await fetch('/api/ha')
|
||||||
|
const d = await r.json()
|
||||||
|
if (d.states) setHaStates(d.states)
|
||||||
|
if (d.sensors) setSensors(d.sensors)
|
||||||
|
} catch {}
|
||||||
|
}, [])
|
||||||
|
|
||||||
const handleHAUpdate = useCallback(() => {
|
useEffect(() => {
|
||||||
setTimeout(refreshHA, 500);
|
loadHA()
|
||||||
}, [refreshHA]);
|
const t = setInterval(loadHA, 30_000)
|
||||||
|
return () => clearInterval(t)
|
||||||
|
}, [loadHA])
|
||||||
|
|
||||||
const handleRoomClick = useCallback((roomId: string) => {
|
const devicesInRoom = DEVICES_BY_ROOM[activeRoom] || []
|
||||||
setActiveTab("devices");
|
|
||||||
setRoomFilter(roomId);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const livingRoom = states["light.living_room"];
|
const getDeviceState = (haKey?: string): boolean => {
|
||||||
const bedroom = states["light.bedroom"];
|
if (!haKey || !haStates[haKey]) return false
|
||||||
const thermostat = states["climate.thermostat"];
|
return haStates[haKey].state === 'on'
|
||||||
const airPurifier = states["fan.air_purifier"];
|
}
|
||||||
|
|
||||||
|
const getDeviceExtra = (id: string): string | undefined => {
|
||||||
|
if (id === 'air_purifier' && sensors) {
|
||||||
|
return `PM2.5: ${sensors.pm25}`
|
||||||
|
}
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="relative w-screen overflow-hidden"
|
style={{
|
||||||
style={{ height: "100dvh", background: "var(--bg)" }}
|
display: 'flex',
|
||||||
|
height: '100dvh',
|
||||||
|
width: '100%',
|
||||||
|
background: 'var(--bg)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{/* Ambient orbs */}
|
<Sidebar active={tab} onChange={setTab} />
|
||||||
<div
|
|
||||||
className="orb"
|
|
||||||
style={{
|
|
||||||
width: 480,
|
|
||||||
height: 480,
|
|
||||||
top: "-12%",
|
|
||||||
left: "-8%",
|
|
||||||
background: isDark ? "rgba(245,158,11,0.09)" : "rgba(245,158,11,0.06)",
|
|
||||||
animation: "orbMove1 22s ease-in-out infinite",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className="orb"
|
|
||||||
style={{
|
|
||||||
width: 420,
|
|
||||||
height: 420,
|
|
||||||
bottom: "0%",
|
|
||||||
right: "-8%",
|
|
||||||
background: isDark ? "rgba(139,92,246,0.1)" : "rgba(139,92,246,0.06)",
|
|
||||||
animation: "orbMove2 28s ease-in-out infinite",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className="orb"
|
|
||||||
style={{
|
|
||||||
width: 360,
|
|
||||||
height: 360,
|
|
||||||
top: "30%",
|
|
||||||
left: "35%",
|
|
||||||
background: isDark ? "rgba(59,130,246,0.07)" : "rgba(59,130,246,0.04)",
|
|
||||||
animation: "orbMove3 34s ease-in-out infinite",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Main layout — flex column fills 100dvh */}
|
<main
|
||||||
<div className="relative z-10 flex flex-col p-4 gap-3" style={{ height: "100dvh" }}>
|
style={{
|
||||||
{/* Top bar */}
|
flex: 1,
|
||||||
<TopBar
|
display: 'flex',
|
||||||
isDark={isDark}
|
flexDirection: 'column',
|
||||||
onToggleTheme={() => setIsDark(!isDark)}
|
overflow: 'hidden',
|
||||||
weather={weather}
|
minWidth: 0,
|
||||||
isDemo={isDemo}
|
}}
|
||||||
/>
|
>
|
||||||
|
<TopBar weather={weather} sensors={sensors} />
|
||||||
|
|
||||||
{/* Rooms row — only on home tab */}
|
{tab === 'home' && (
|
||||||
<AnimatePresence>
|
<>
|
||||||
{activeTab === "home" && (
|
<RoomTabs rooms={ROOMS} active={activeRoom} onChange={setActiveRoom} />
|
||||||
<motion.div
|
|
||||||
key="rooms-row"
|
<div
|
||||||
initial={{ opacity: 0, height: 0 }}
|
style={{
|
||||||
animate={{ opacity: 1, height: "auto" }}
|
flex: 1,
|
||||||
exit={{ opacity: 0, height: 0 }}
|
overflowY: 'auto',
|
||||||
transition={{ duration: 0.2 }}
|
WebkitOverflowScrolling: 'touch' as any,
|
||||||
|
padding: '16px 20px 24px',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<RoomsRow onRoomClick={handleRoomClick} />
|
{devicesInRoom.length === 0 ? (
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
|
|
||||||
{/* Content area — fills remaining space */}
|
|
||||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
|
||||||
<AnimatePresence mode="wait">
|
|
||||||
|
|
||||||
{/* ═══════════════ HOME TAB ═══════════════ */}
|
|
||||||
{activeTab === "home" && (
|
|
||||||
<motion.div
|
|
||||||
key="home"
|
|
||||||
variants={containerVariants}
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit={{ opacity: 0 }}
|
|
||||||
>
|
|
||||||
{/*
|
|
||||||
Row 1: [Свет Гостиная] [Свет Спальня] [Климат]
|
|
||||||
Row 2: [Очиститель ×2] [Погода]
|
|
||||||
*/}
|
|
||||||
<div
|
<div
|
||||||
className="grid gap-3"
|
|
||||||
style={{
|
style={{
|
||||||
gridTemplateColumns: "1fr 1fr 1fr",
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
height: 200,
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
gap: 8,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Свет Гостиная */}
|
<span style={{ fontSize: 40 }}>🏠</span>
|
||||||
<motion.div variants={cardVariants}>
|
<span style={{ fontSize: 15 }}>Устройства не добавлены</span>
|
||||||
<LightCard
|
|
||||||
entityId="light.living_room"
|
|
||||||
name="Гостиная"
|
|
||||||
state={livingRoom?.state || "off"}
|
|
||||||
brightness={livingRoom?.attributes?.brightness}
|
|
||||||
showSlider={true}
|
|
||||||
onUpdate={handleHAUpdate}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Свет Спальня */}
|
|
||||||
<motion.div variants={cardVariants}>
|
|
||||||
<LightCard
|
|
||||||
entityId="light.bedroom"
|
|
||||||
name="Спальня"
|
|
||||||
state={bedroom?.state || "off"}
|
|
||||||
brightness={bedroom?.attributes?.brightness}
|
|
||||||
showSlider={false}
|
|
||||||
onUpdate={handleHAUpdate}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Термостат */}
|
|
||||||
<motion.div variants={cardVariants}>
|
|
||||||
<TemperatureCard
|
|
||||||
entityId="climate.thermostat"
|
|
||||||
currentTemp={thermostat?.attributes?.current_temperature}
|
|
||||||
targetTemp={thermostat?.attributes?.temperature}
|
|
||||||
state={thermostat?.state || "off"}
|
|
||||||
onUpdate={handleHAUpdate}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Очиститель воздуха — 2 колонки */}
|
|
||||||
<motion.div
|
|
||||||
variants={cardVariants}
|
|
||||||
style={{ gridColumn: "span 2" }}
|
|
||||||
>
|
|
||||||
<AirPurifierCard
|
|
||||||
entityId="fan.air_purifier"
|
|
||||||
state={airPurifier?.state || "off"}
|
|
||||||
presetMode={airPurifier?.attributes?.preset_mode}
|
|
||||||
onUpdate={handleHAUpdate}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Погода — правый нижний */}
|
|
||||||
<motion.div variants={cardVariants}>
|
|
||||||
<WeatherCard weather={weather} />
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
) : (
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ═══════════════ DEVICES TAB ═══════════════ */}
|
|
||||||
{activeTab === "devices" && (
|
|
||||||
<motion.div
|
|
||||||
key="devices"
|
|
||||||
className="h-full flex flex-col gap-3"
|
|
||||||
variants={containerVariants}
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit={{ opacity: 0 }}
|
|
||||||
>
|
|
||||||
{/* Room filter pills */}
|
|
||||||
{roomFilter && (
|
|
||||||
<motion.div
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
initial={{ opacity: 0, y: -8 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
>
|
|
||||||
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
Фильтр:
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={() => setRoomFilter(null)}
|
|
||||||
className="text-xs px-3 py-1 rounded-full font-semibold flex items-center gap-1"
|
|
||||||
style={{
|
|
||||||
background: "rgba(99,102,241,0.15)",
|
|
||||||
color: "#6366f1",
|
|
||||||
border: "1px solid rgba(99,102,241,0.3)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{{
|
|
||||||
living: "🛋️ Гостиная",
|
|
||||||
bedroom: "🛏️ Спальня",
|
|
||||||
kitchen: "🍳 Кухня",
|
|
||||||
bathroom: "🚿 Ванная",
|
|
||||||
}[roomFilter] || roomFilter}
|
|
||||||
<span style={{ opacity: 0.6 }}>✕</span>
|
|
||||||
</button>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
<div
|
<div
|
||||||
className="flex-1 grid gap-3"
|
|
||||||
style={{
|
style={{
|
||||||
gridTemplateColumns: "1fr 1fr 1fr",
|
display: 'grid',
|
||||||
gridTemplateRows: "1fr 1fr",
|
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||||
|
gap: 12,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<motion.div variants={cardVariants}>
|
{devicesInRoom.map(device => (
|
||||||
<LightCard
|
<DeviceCard
|
||||||
entityId="light.living_room"
|
key={device.id}
|
||||||
name="Гостиная"
|
id={device.id}
|
||||||
state={livingRoom?.state || "off"}
|
name={device.name}
|
||||||
brightness={livingRoom?.attributes?.brightness}
|
icon={device.icon}
|
||||||
showSlider={true}
|
entityId={device.entityId}
|
||||||
onUpdate={handleHAUpdate}
|
domain={device.domain}
|
||||||
|
initialState={getDeviceState(device.haKey)}
|
||||||
|
isMock={device.isMock}
|
||||||
|
extraInfo={getDeviceExtra(device.id)}
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
))}
|
||||||
<motion.div variants={cardVariants}>
|
|
||||||
<LightCard
|
|
||||||
entityId="light.bedroom"
|
|
||||||
name="Спальня"
|
|
||||||
state={bedroom?.state || "off"}
|
|
||||||
brightness={bedroom?.attributes?.brightness}
|
|
||||||
showSlider={false}
|
|
||||||
onUpdate={handleHAUpdate}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
<motion.div variants={cardVariants}>
|
|
||||||
<AirPurifierCard
|
|
||||||
entityId="fan.air_purifier"
|
|
||||||
state={airPurifier?.state || "off"}
|
|
||||||
presetMode={airPurifier?.attributes?.preset_mode}
|
|
||||||
onUpdate={handleHAUpdate}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
<motion.div variants={cardVariants} style={{ gridColumn: "span 2" }}>
|
|
||||||
<TemperatureCard
|
|
||||||
entityId="climate.thermostat"
|
|
||||||
currentTemp={thermostat?.attributes?.current_temperature}
|
|
||||||
targetTemp={thermostat?.attributes?.temperature}
|
|
||||||
state={thermostat?.state || "off"}
|
|
||||||
onUpdate={handleHAUpdate}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
<motion.div variants={cardVariants}>
|
|
||||||
<WeatherCard weather={weather} compact />
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
)}
|
||||||
)}
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* ═══════════════ SETTINGS TAB ═══════════════ */}
|
{tab === 'rooms' && (
|
||||||
{activeTab === "settings" && (
|
<div
|
||||||
<motion.div
|
style={{
|
||||||
key="settings"
|
flex: 1,
|
||||||
className="h-full flex items-center justify-center"
|
display: 'flex',
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
flexDirection: 'column',
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
alignItems: 'center',
|
||||||
exit={{ opacity: 0, scale: 0.95 }}
|
justifyContent: 'center',
|
||||||
transition={{ duration: 0.25 }}
|
gap: 12,
|
||||||
>
|
color: 'var(--text-secondary)',
|
||||||
<div className="glass-card p-8 max-w-md w-full text-center">
|
}}
|
||||||
<div className="text-4xl mb-4">⚙️</div>
|
>
|
||||||
<h2
|
<span style={{ fontSize: 48 }}>🏠</span>
|
||||||
className="text-lg font-semibold mb-2"
|
<span style={{ fontSize: 16 }}>Управление комнатами</span>
|
||||||
style={{ color: "var(--text-primary)" }}
|
<span style={{ fontSize: 13 }}>Скоро</span>
|
||||||
>
|
</div>
|
||||||
Настройки
|
)}
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
className="text-sm mb-6"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
Умный дом подключён. Когда появятся устройства — они появятся автоматически.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="space-y-3 text-left">
|
{tab === 'sensors' && sensors && (
|
||||||
{[
|
<div
|
||||||
{ label: "HA URL", value: "✅ Настроен" },
|
style={{
|
||||||
{ label: "HA Token", value: isDemo ? "❌ Не настроен" : "✅ Настроен" },
|
flex: 1,
|
||||||
{ label: "Vikunja", value: "✅ Подключён" },
|
overflowY: 'auto',
|
||||||
{ label: "Pulse API", value: "✅ Подключён" },
|
padding: '20px',
|
||||||
{ label: "Очиститель", value: (airPurifier as any)?._mock ? "⚡ Демо" : "✅ Реальный" },
|
display: 'flex',
|
||||||
].map((item) => (
|
flexDirection: 'column',
|
||||||
<div
|
gap: 12,
|
||||||
key={item.label}
|
}}
|
||||||
className="flex justify-between items-center px-4 py-3 rounded-2xl"
|
>
|
||||||
style={{
|
<h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>Датчики</h2>
|
||||||
background: "rgba(255,255,255,0.04)",
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
|
||||||
border: "1px solid rgba(255,255,255,0.06)",
|
{[
|
||||||
}}
|
{ label: 'Температура', value: `${sensors.temperature}°C`, icon: '🌡️' },
|
||||||
>
|
{ label: 'Влажность', value: `${sensors.humidity}%`, icon: '💧' },
|
||||||
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
{ label: 'PM2.5', value: `${sensors.pm25} μg/m³`, icon: '💨' },
|
||||||
{item.label}
|
].map(s => (
|
||||||
</span>
|
<div
|
||||||
<span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
|
key={s.label}
|
||||||
{item.value}
|
style={{
|
||||||
</span>
|
background: 'var(--card-bg)',
|
||||||
</div>
|
border: '1px solid var(--card-border)',
|
||||||
))}
|
borderRadius: 18,
|
||||||
</div>
|
padding: 20,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ fontSize: 28 }}>{s.icon}</span>
|
||||||
|
<div style={{ fontSize: 22, fontWeight: 700 }}>{s.value}</div>
|
||||||
|
<div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{s.label}</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
))}
|
||||||
)}
|
</div>
|
||||||
</AnimatePresence>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{/* Bottom nav — flex-shrink-0, always visible */}
|
{tab === 'sensors' && !sensors && (
|
||||||
<div className="flex-shrink-0" style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }}>
|
<div
|
||||||
<BottomNav active={activeTab} onChange={setActiveTab} />
|
style={{
|
||||||
</div>
|
flex: 1,
|
||||||
</div>
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Загрузка датчиков...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tab === 'settings' && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: 12,
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ fontSize: 48 }}>⚙️</span>
|
||||||
|
<span style={{ fontSize: 16 }}>Настройки</span>
|
||||||
|
<span style={{ fontSize: 13 }}>Скоро</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,108 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
|
||||||
import { X, Plus } from "lucide-react";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
open: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
onAdd: (title: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AddTaskModal({ open, onClose, onAdd }: Props) {
|
|
||||||
const [title, setTitle] = useState("");
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
if (!title.trim()) return;
|
|
||||||
onAdd(title.trim());
|
|
||||||
setTitle("");
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AnimatePresence>
|
|
||||||
{open && (
|
|
||||||
<motion.div
|
|
||||||
className="modal-backdrop"
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
exit={{ opacity: 0 }}
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-6 w-96 mx-4"
|
|
||||||
style={{ border: "1px solid rgba(99,102,241,0.3)" }}
|
|
||||||
initial={{ opacity: 0, scale: 0.85, y: 20 }}
|
|
||||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
||||||
exit={{ opacity: 0, scale: 0.85, y: 20 }}
|
|
||||||
transition={{ type: "spring", stiffness: 400, damping: 30 }}
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-5">
|
|
||||||
<h3
|
|
||||||
className="text-lg font-semibold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
Новая задача
|
|
||||||
</h3>
|
|
||||||
<motion.button
|
|
||||||
onClick={onClose}
|
|
||||||
className="w-8 h-8 rounded-lg flex items-center justify-center"
|
|
||||||
style={{ background: "rgba(255,255,255,0.08)" }}
|
|
||||||
whileTap={{ scale: 0.9 }}
|
|
||||||
>
|
|
||||||
<X size={16} color="var(--text-secondary)" />
|
|
||||||
</motion.button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={title}
|
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
|
||||||
onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
|
|
||||||
placeholder="Название задачи..."
|
|
||||||
autoFocus
|
|
||||||
className="w-full px-4 py-3 rounded-xl text-sm outline-none mb-4"
|
|
||||||
style={{
|
|
||||||
background: "rgba(255,255,255,0.06)",
|
|
||||||
border: "1px solid rgba(255,255,255,0.1)",
|
|
||||||
color: "var(--text-primary)",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<motion.button
|
|
||||||
onClick={onClose}
|
|
||||||
className="flex-1 py-3 rounded-xl text-sm font-medium"
|
|
||||||
style={{
|
|
||||||
background: "rgba(255,255,255,0.06)",
|
|
||||||
color: "var(--text-secondary)",
|
|
||||||
border: "1px solid rgba(255,255,255,0.08)",
|
|
||||||
}}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
>
|
|
||||||
Отмена
|
|
||||||
</motion.button>
|
|
||||||
<motion.button
|
|
||||||
onClick={handleSubmit}
|
|
||||||
className="flex-1 py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-2"
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
"linear-gradient(135deg, #6366f1, #8b5cf6)",
|
|
||||||
color: "white",
|
|
||||||
boxShadow: "0 0 20px rgba(99,102,241,0.4)",
|
|
||||||
}}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
disabled={!title.trim()}
|
|
||||||
>
|
|
||||||
<Plus size={16} />
|
|
||||||
Добавить
|
|
||||||
</motion.button>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { Home, Cpu, Settings } from "lucide-react";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
active: string;
|
|
||||||
onChange: (tab: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const TABS = [
|
|
||||||
{ id: "home", label: "Главная", icon: Home, color: "#6366f1" },
|
|
||||||
{ id: "devices", label: "Устройства", icon: Cpu, color: "#3b82f6" },
|
|
||||||
{ id: "settings", label: "Настройки", icon: Settings, color: "#10b981" },
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function BottomNav({ active, onChange }: Props) {
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="glass-card px-3 py-2 flex items-center justify-around no-select flex-shrink-0"
|
|
||||||
style={{ borderRadius: "20px" }}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.5 }}
|
|
||||||
>
|
|
||||||
{TABS.map((tab) => {
|
|
||||||
const Icon = tab.icon;
|
|
||||||
const isActive = active === tab.id;
|
|
||||||
return (
|
|
||||||
<motion.button
|
|
||||||
key={tab.id}
|
|
||||||
onClick={() => onChange(tab.id)}
|
|
||||||
className="flex flex-col items-center gap-1.5 px-10 py-2 rounded-2xl relative"
|
|
||||||
whileTap={{ scale: 0.85 }}
|
|
||||||
>
|
|
||||||
{isActive && (
|
|
||||||
<motion.div
|
|
||||||
className="absolute inset-0 rounded-2xl"
|
|
||||||
style={{
|
|
||||||
background: `${tab.color}15`,
|
|
||||||
border: `1px solid ${tab.color}30`,
|
|
||||||
boxShadow: `0 0 16px ${tab.color}20`,
|
|
||||||
}}
|
|
||||||
layoutId="navActive"
|
|
||||||
transition={{ type: "spring", stiffness: 450, damping: 30 }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Icon size={22} color={isActive ? tab.color : "var(--text-secondary)"} strokeWidth={isActive ? 2 : 1.5} />
|
|
||||||
<span className="text-xs font-semibold" style={{ color: isActive ? tab.color : "var(--text-secondary)" }}>
|
|
||||||
{tab.label}
|
|
||||||
</span>
|
|
||||||
</motion.button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
141
components/DeviceCard.tsx
Normal file
141
components/DeviceCard.tsx
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
interface DeviceCardProps {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
icon: string
|
||||||
|
entityId?: string
|
||||||
|
domain?: string
|
||||||
|
initialState: boolean
|
||||||
|
isMock?: boolean
|
||||||
|
extraInfo?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DeviceCard({
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
icon,
|
||||||
|
entityId,
|
||||||
|
domain,
|
||||||
|
initialState,
|
||||||
|
isMock = false,
|
||||||
|
extraInfo,
|
||||||
|
}: DeviceCardProps) {
|
||||||
|
const [isOn, setIsOn] = useState(initialState)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const toggle = async () => {
|
||||||
|
const next = !isOn
|
||||||
|
setIsOn(next) // optimistic update
|
||||||
|
|
||||||
|
if (!isMock && entityId && domain) {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
await fetch('/api/ha', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
domain,
|
||||||
|
service: next ? 'turn_on' : 'turn_off',
|
||||||
|
entity_id: entityId,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
} catch {
|
||||||
|
// revert on error
|
||||||
|
setIsOn(!next)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: isOn ? 'rgba(0,212,255,0.06)' : 'var(--card-bg)',
|
||||||
|
border: isOn ? '1px solid rgba(0,212,255,0.2)' : '1px solid var(--card-border)',
|
||||||
|
borderRadius: 18,
|
||||||
|
padding: '16px',
|
||||||
|
minHeight: 140,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
transition: 'all 0.25s ease',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Top row: icon + toggle */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
borderRadius: 12,
|
||||||
|
background: isOn ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.06)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
fontSize: 22,
|
||||||
|
transition: 'all 0.25s ease',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Toggle button */}
|
||||||
|
<button
|
||||||
|
onClick={toggle}
|
||||||
|
disabled={loading}
|
||||||
|
style={{
|
||||||
|
width: 50,
|
||||||
|
height: 28,
|
||||||
|
borderRadius: 14,
|
||||||
|
background: isOn
|
||||||
|
? 'linear-gradient(90deg, #00b4d8, #00d4ff)'
|
||||||
|
: 'rgba(255,255,255,0.1)',
|
||||||
|
position: 'relative',
|
||||||
|
transition: 'background 0.3s ease',
|
||||||
|
flexShrink: 0,
|
||||||
|
touchAction: 'manipulation',
|
||||||
|
WebkitTapHighlightColor: 'transparent',
|
||||||
|
opacity: loading ? 0.6 : 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 3,
|
||||||
|
left: isOn ? 25 : 3,
|
||||||
|
width: 22,
|
||||||
|
height: 22,
|
||||||
|
borderRadius: '50%',
|
||||||
|
background: '#fff',
|
||||||
|
boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
|
||||||
|
transition: 'left 0.25s ease',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom: name + status */}
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
marginBottom: 3,
|
||||||
|
lineHeight: 1.2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 12, color: isOn ? 'var(--accent)' : 'var(--text-secondary)' }}>
|
||||||
|
{isOn ? 'Включён' : 'Выключен'}
|
||||||
|
{extraInfo && isOn ? ` · ${extraInfo}` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
73
components/RoomTabs.tsx
Normal file
73
components/RoomTabs.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
interface Room {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
emoji: string
|
||||||
|
deviceCount: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RoomTabsProps {
|
||||||
|
rooms: Room[]
|
||||||
|
active: string
|
||||||
|
onChange: (id: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RoomTabs({ rooms, active, onChange }: RoomTabsProps) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: 10,
|
||||||
|
padding: '12px 20px',
|
||||||
|
overflowX: 'auto',
|
||||||
|
flexShrink: 0,
|
||||||
|
WebkitOverflowScrolling: 'touch' as any,
|
||||||
|
scrollbarWidth: 'none',
|
||||||
|
msOverflowStyle: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{rooms.map(room => {
|
||||||
|
const isActive = active === room.id
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={room.id}
|
||||||
|
onClick={() => onChange(room.id)}
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 2,
|
||||||
|
padding: '10px 18px',
|
||||||
|
borderRadius: 14,
|
||||||
|
background: isActive ? 'rgba(0,212,255,0.12)' : 'rgba(255,255,255,0.04)',
|
||||||
|
border: isActive ? '1px solid rgba(0,212,255,0.3)' : '1px solid rgba(255,255,255,0.06)',
|
||||||
|
minWidth: 90,
|
||||||
|
flexShrink: 0,
|
||||||
|
touchAction: 'manipulation',
|
||||||
|
WebkitTapHighlightColor: 'transparent',
|
||||||
|
transition: 'all 0.2s ease',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 18 }}>{room.emoji}</span>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: isActive ? 600 : 400,
|
||||||
|
color: isActive ? 'var(--accent)' : 'var(--text-primary)',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{room.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
|
||||||
|
{room.deviceCount} {room.deviceCount === 1 ? 'устройство' : room.deviceCount >= 2 && room.deviceCount <= 4 ? 'устройства' : 'устройств'}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
|
|
||||||
interface Room {
|
|
||||||
id: string;
|
|
||||||
emoji: string;
|
|
||||||
name: string;
|
|
||||||
deviceCount: number;
|
|
||||||
color: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ROOMS: Room[] = [
|
|
||||||
{ id: "living", emoji: "🛋️", name: "Гостиная", deviceCount: 3, color: "#6366f1" },
|
|
||||||
{ id: "bedroom", emoji: "🛏️", name: "Спальня", deviceCount: 2, color: "#8b5cf6" },
|
|
||||||
{ id: "kitchen", emoji: "🍳", name: "Кухня", deviceCount: 1, color: "#f59e0b" },
|
|
||||||
{ id: "bathroom", emoji: "🚿", name: "Ванная", deviceCount: 0, color: "#06b6d4" },
|
|
||||||
];
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
onRoomClick?: (roomId: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function RoomsRow({ onRoomClick }: Props) {
|
|
||||||
return (
|
|
||||||
<div className="flex gap-3 overflow-x-auto no-scrollbar pb-1">
|
|
||||||
{ROOMS.map((room, i) => (
|
|
||||||
<motion.button
|
|
||||||
key={room.id}
|
|
||||||
onClick={() => onRoomClick?.(room.id)}
|
|
||||||
className="flex-shrink-0 glass-card flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
|
|
||||||
style={{
|
|
||||||
minWidth: "140px",
|
|
||||||
border: `1px solid ${room.color}22`,
|
|
||||||
}}
|
|
||||||
initial={{ opacity: 0, x: -10 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.3, delay: i * 0.05 }}
|
|
||||||
whileTap={{ scale: 0.93 }}
|
|
||||||
whileHover={{ scale: 1.02 }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 text-xl"
|
|
||||||
style={{ background: `${room.color}18` }}
|
|
||||||
>
|
|
||||||
{room.emoji}
|
|
||||||
</div>
|
|
||||||
<div className="text-left min-w-0">
|
|
||||||
<div
|
|
||||||
className="text-sm font-semibold truncate"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{room.name}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-xs"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{room.deviceCount}{" "}
|
|
||||||
{room.deviceCount === 1
|
|
||||||
? "устройство"
|
|
||||||
: room.deviceCount >= 2 && room.deviceCount <= 4
|
|
||||||
? "устройства"
|
|
||||||
: "устройств"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{room.deviceCount > 0 && (
|
|
||||||
<div
|
|
||||||
className="ml-auto w-2 h-2 rounded-full flex-shrink-0"
|
|
||||||
style={{ background: room.color }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</motion.button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
84
components/Sidebar.tsx
Normal file
84
components/Sidebar.tsx
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Home, LayoutGrid, Thermometer, Settings } from 'lucide-react'
|
||||||
|
|
||||||
|
type Tab = 'home' | 'rooms' | 'sensors' | 'settings'
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
active: Tab
|
||||||
|
onChange: (tab: Tab) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const navItems: { id: Tab; icon: React.ComponentType<{ size?: number; color?: string }> }[] = [
|
||||||
|
{ id: 'home', icon: Home },
|
||||||
|
{ id: 'rooms', icon: LayoutGrid },
|
||||||
|
{ id: 'sensors', icon: Thermometer },
|
||||||
|
{ id: 'settings', icon: Settings },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function Sidebar({ active, onChange }: SidebarProps) {
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
style={{
|
||||||
|
width: 72,
|
||||||
|
minWidth: 72,
|
||||||
|
height: '100dvh',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingTop: 20,
|
||||||
|
paddingBottom: 20,
|
||||||
|
background: 'rgba(0,0,0,0.5)',
|
||||||
|
backdropFilter: 'blur(20px)',
|
||||||
|
WebkitBackdropFilter: 'blur(20px)',
|
||||||
|
borderRight: '1px solid rgba(255,255,255,0.05)',
|
||||||
|
gap: 8,
|
||||||
|
flexShrink: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Logo */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
borderRadius: 14,
|
||||||
|
background: 'linear-gradient(135deg, #00d4ff22, #00d4ff44)',
|
||||||
|
border: '1px solid rgba(0,212,255,0.3)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginBottom: 24,
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Home size={20} color="#00d4ff" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nav items */}
|
||||||
|
{navItems.map(({ id, icon: Icon }) => {
|
||||||
|
const isActive = active === id
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={id}
|
||||||
|
onClick={() => onChange(id)}
|
||||||
|
style={{
|
||||||
|
width: 48,
|
||||||
|
height: 48,
|
||||||
|
borderRadius: 14,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
background: isActive ? 'rgba(0,212,255,0.15)' : 'transparent',
|
||||||
|
border: isActive ? '1px solid rgba(0,212,255,0.25)' : '1px solid transparent',
|
||||||
|
transition: 'all 0.2s ease',
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon size={22} color={isActive ? '#00d4ff' : 'rgba(255,255,255,0.4)'} />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { Sun, Moon } from "lucide-react";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
isDark: boolean;
|
|
||||||
onToggle: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ThemeToggle({ isDark, onToggle }: Props) {
|
|
||||||
return (
|
|
||||||
<motion.button
|
|
||||||
onClick={onToggle}
|
|
||||||
className="relative w-14 h-7 rounded-full flex items-center cursor-pointer no-select"
|
|
||||||
style={{
|
|
||||||
background: isDark
|
|
||||||
? "rgba(99,102,241,0.3)"
|
|
||||||
: "rgba(245,158,11,0.3)",
|
|
||||||
border: `1px solid ${isDark ? "rgba(99,102,241,0.5)" : "rgba(245,158,11,0.5)"}`,
|
|
||||||
}}
|
|
||||||
whileTap={{ scale: 0.9 }}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
className="absolute w-5 h-5 rounded-full flex items-center justify-center"
|
|
||||||
style={{
|
|
||||||
background: isDark ? "#6366f1" : "#f59e0b",
|
|
||||||
boxShadow: isDark
|
|
||||||
? "0 0 8px rgba(99,102,241,0.8)"
|
|
||||||
: "0 0 8px rgba(245,158,11,0.8)",
|
|
||||||
}}
|
|
||||||
animate={{ x: isDark ? 2 : 28 }}
|
|
||||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
|
||||||
>
|
|
||||||
{isDark ? (
|
|
||||||
<Moon size={10} color="white" />
|
|
||||||
) : (
|
|
||||||
<Sun size={10} color="white" />
|
|
||||||
)}
|
|
||||||
</motion.div>
|
|
||||||
</motion.button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,187 +1,229 @@
|
|||||||
"use client";
|
'use client'
|
||||||
|
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from 'react'
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { Cloud, Droplets, Wind } from 'lucide-react'
|
||||||
import ThemeToggle from "./ThemeToggle";
|
|
||||||
|
|
||||||
function getWeatherEmoji(code: string): string {
|
interface WeatherData {
|
||||||
const c = parseInt(code);
|
temp: string
|
||||||
if (c === 113) return "☀️";
|
desc: string
|
||||||
if (c === 116) return "⛅";
|
humidity: string
|
||||||
if (c === 119 || c === 122) return "☁️";
|
windSpeed: string
|
||||||
if (c >= 176 && c <= 300) return "🌧️";
|
feelsLike: string
|
||||||
if (c >= 200 && c <= 210) return "⛈️";
|
forecast?: { date: string; maxTemp: string; minTemp: string; desc: string }[]
|
||||||
if (c >= 210 && c <= 260) return "❄️";
|
|
||||||
return "🌤️";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDayName(dateStr: string): string {
|
interface SensorData {
|
||||||
const d = new Date(dateStr + "T12:00:00");
|
temperature: number
|
||||||
const today = new Date();
|
humidity: number
|
||||||
const tomorrow = new Date(today);
|
pm25: number
|
||||||
tomorrow.setDate(today.getDate() + 1);
|
|
||||||
if (d.toDateString() === today.toDateString()) return "Сег";
|
|
||||||
if (d.toDateString() === tomorrow.toDateString()) return "Завт";
|
|
||||||
return d.toLocaleDateString("ru-RU", { weekday: "short" });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Props {
|
interface TopBarProps {
|
||||||
isDark: boolean;
|
weather: WeatherData | null
|
||||||
onToggleTheme: () => void;
|
sensors: SensorData | null
|
||||||
weather: any;
|
|
||||||
isDemo?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function TopBar({ isDark, onToggleTheme, weather, isDemo }: Props) {
|
function getWeatherEmoji(desc: string): string {
|
||||||
const [time, setTime] = useState("");
|
const d = desc?.toLowerCase() || ''
|
||||||
const [date, setDate] = useState("");
|
if (d.includes('ясно') || d.includes('солнеч')) return '☀️'
|
||||||
const [showModal, setShowModal] = useState(false);
|
if (d.includes('облач')) return '⛅'
|
||||||
|
if (d.includes('пасмурн')) return '☁️'
|
||||||
|
if (d.includes('дождь') || d.includes('морос')) return '🌧️'
|
||||||
|
if (d.includes('снег')) return '❄️'
|
||||||
|
if (d.includes('гроз')) return '⛈️'
|
||||||
|
return '🌤️'
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(date: Date): string {
|
||||||
|
return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(date: Date): string {
|
||||||
|
return date.toLocaleDateString('ru-RU', { weekday: 'short', day: 'numeric', month: 'short' })
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TopBar({ weather, sensors }: TopBarProps) {
|
||||||
|
const [time, setTime] = useState(() => new Date())
|
||||||
|
const [showModal, setShowModal] = useState(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const update = () => {
|
const t = setInterval(() => setTime(new Date()), 1000)
|
||||||
const now = new Date();
|
return () => clearInterval(t)
|
||||||
setTime(now.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" }));
|
}, [])
|
||||||
setDate(now.toLocaleDateString("ru-RU", { weekday: "short", day: "numeric", month: "long" }));
|
|
||||||
};
|
|
||||||
update();
|
|
||||||
const id = setInterval(update, 1000);
|
|
||||||
return () => clearInterval(id);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const hasWeather = weather && weather.temp && weather.temp !== "—";
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<motion.div
|
<header
|
||||||
className="glass-card px-6 py-3 flex items-center justify-between no-select flex-shrink-0"
|
style={{
|
||||||
style={{ borderRadius: "20px" }}
|
height: 64,
|
||||||
initial={{ opacity: 0, y: -20 }}
|
display: 'flex',
|
||||||
animate={{ opacity: 1, y: 0 }}
|
alignItems: 'center',
|
||||||
transition={{ duration: 0.5 }}
|
justifyContent: 'space-between',
|
||||||
|
padding: '0 20px',
|
||||||
|
borderBottom: '1px solid rgba(255,255,255,0.06)',
|
||||||
|
background: 'rgba(255,255,255,0.02)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{/* Time & Date */}
|
{/* Left: time + date */}
|
||||||
<div className="flex items-baseline gap-4">
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
|
||||||
<span className="font-black tracking-tight leading-none" style={{ fontSize: "42px", color: "var(--text-primary)" }}>
|
<span style={{ fontSize: 22, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.5px' }}>
|
||||||
{time}
|
{formatTime(time)}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm font-medium capitalize" style={{ color: "var(--text-secondary)" }}>
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
||||||
{date}
|
{formatDate(time)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Weather pill — clickable */}
|
{/* Right: sensors + weather */}
|
||||||
{hasWeather ? (
|
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||||
<motion.button
|
{/* Room sensors */}
|
||||||
className="flex items-center gap-3 px-5 py-2 rounded-2xl cursor-pointer"
|
{sensors && (
|
||||||
style={{ background: "rgba(59,130,246,0.1)", border: "1px solid rgba(59,130,246,0.22)" }}
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
initial={{ opacity: 0, scale: 0.9 }}
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
<span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>🌡️</span>
|
||||||
transition={{ delay: 0.3 }}
|
<span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-primary)' }}>
|
||||||
whileHover={{ scale: 1.03 }}
|
{sensors.temperature}°
|
||||||
whileTap={{ scale: 0.97 }}
|
</span>
|
||||||
onClick={() => setShowModal(true)}
|
|
||||||
>
|
|
||||||
<span className="text-2xl leading-none">{getWeatherEmoji(weather.weatherCode)}</span>
|
|
||||||
<div>
|
|
||||||
<div className="text-xl font-black leading-tight" style={{ color: "var(--text-primary)" }}>{weather.temp}°C</div>
|
|
||||||
<div className="text-xs leading-tight" style={{ color: "var(--text-secondary)" }}>{weather.desc}</div>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs ml-1" style={{ color: "var(--text-secondary)", opacity: 0.6 }}>▼</span>
|
|
||||||
</motion.button>
|
|
||||||
) : (
|
|
||||||
<div className="text-sm px-4 py-2 rounded-2xl" style={{ color: "var(--text-secondary)", background: "rgba(255,255,255,0.04)" }}>
|
|
||||||
🌤️ {weather ? "Загрузка..." : "—"}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Theme toggle + Demo badge */}
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{isDemo && (
|
|
||||||
<motion.span
|
|
||||||
className="text-xs px-2.5 py-1 rounded-full font-semibold"
|
|
||||||
style={{ background: "rgba(245,158,11,0.15)", color: "#f59e0b", border: "1px solid rgba(245,158,11,0.3)" }}
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
>
|
|
||||||
Demo
|
|
||||||
</motion.span>
|
|
||||||
)}
|
|
||||||
<ThemeToggle isDark={isDark} onToggle={onToggleTheme} />
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Weather Modal */}
|
|
||||||
<AnimatePresence>
|
|
||||||
{showModal && weather && (
|
|
||||||
<motion.div
|
|
||||||
className="fixed inset-0 z-50 flex items-center justify-center p-6"
|
|
||||||
style={{ background: "rgba(0,0,0,0.7)", backdropFilter: "blur(12px)" }}
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
exit={{ opacity: 0 }}
|
|
||||||
onClick={() => setShowModal(false)}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-8 w-full max-w-lg"
|
|
||||||
style={{ borderRadius: "28px", background: "rgba(15,15,25,0.9)", border: "1px solid rgba(255,255,255,0.12)" }}
|
|
||||||
initial={{ scale: 0.9, y: 20 }}
|
|
||||||
animate={{ scale: 1, y: 0 }}
|
|
||||||
exit={{ scale: 0.9, y: 20 }}
|
|
||||||
onClick={e => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between mb-6">
|
|
||||||
<h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>🌍 Санкт-Петербург</h2>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowModal(false)}
|
|
||||||
className="w-9 h-9 rounded-full flex items-center justify-center text-lg"
|
|
||||||
style={{ background: "rgba(255,255,255,0.08)", color: "var(--text-secondary)" }}
|
|
||||||
>✕</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||||
{/* Current */}
|
<Droplets size={13} color="rgba(255,255,255,0.4)" />
|
||||||
<div className="flex items-center gap-5 mb-8">
|
<span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-primary)' }}>
|
||||||
<span style={{ fontSize: "72px", lineHeight: 1 }}>{getWeatherEmoji(weather.weatherCode)}</span>
|
{sensors.humidity}%
|
||||||
<div>
|
</span>
|
||||||
<div className="font-black" style={{ fontSize: "64px", lineHeight: 1, color: "var(--text-primary)" }}>
|
|
||||||
{weather.temp}°
|
|
||||||
</div>
|
|
||||||
<div className="text-lg" style={{ color: "var(--text-secondary)" }}>{weather.desc}</div>
|
|
||||||
<div className="flex gap-4 mt-2 text-sm" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
{weather.feelsLike && weather.feelsLike !== "—" && <span>Ощущается {weather.feelsLike}°</span>}
|
|
||||||
{weather.humidity && weather.humidity !== "—" && <span>💧 {weather.humidity}%</span>}
|
|
||||||
{weather.windSpeed && weather.windSpeed !== "—" && <span>💨 {weather.windSpeed} км/ч</span>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{sensors.pm25 !== undefined && (
|
||||||
{/* Forecast */}
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||||
{weather.forecast && weather.forecast.length > 0 && (
|
<Wind size={13} color="rgba(255,255,255,0.4)" />
|
||||||
<div>
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
||||||
<div className="text-xs font-semibold uppercase tracking-widest mb-3" style={{ color: "var(--text-secondary)" }}>
|
PM2.5: {sensors.pm25}
|
||||||
Прогноз
|
</span>
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
{weather.forecast.map((day: any, i: number) => (
|
|
||||||
<div key={i} className="flex items-center justify-between px-4 py-3 rounded-2xl"
|
|
||||||
style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.06)" }}>
|
|
||||||
<span className="text-sm font-semibold w-16" style={{ color: "var(--text-primary)" }}>
|
|
||||||
{getDayName(day.date)}
|
|
||||||
</span>
|
|
||||||
<span className="text-2xl">{getWeatherEmoji(day.weatherCode)}</span>
|
|
||||||
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>{day.desc}</span>
|
|
||||||
<span className="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
|
|
||||||
{day.maxTemp}° / <span style={{ color: "var(--text-secondary)" }}>{day.minTemp}°</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</motion.div>
|
</div>
|
||||||
</motion.div>
|
)}
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
{/* Divider */}
|
||||||
|
{sensors && weather && (
|
||||||
|
<div style={{ width: 1, height: 24, background: 'rgba(255,255,255,0.08)' }} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Weather widget */}
|
||||||
|
{weather && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModal(true)}
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 6,
|
||||||
|
padding: '6px 12px',
|
||||||
|
borderRadius: 10,
|
||||||
|
background: 'rgba(255,255,255,0.05)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.08)',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
touchAction: 'manipulation',
|
||||||
|
WebkitTapHighlightColor: 'transparent',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ fontSize: 16 }}>{getWeatherEmoji(weather.desc)}</span>
|
||||||
|
<span style={{ fontSize: 16, fontWeight: 600 }}>{weather.temp}°</span>
|
||||||
|
<span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{weather.desc}</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Weather Modal */}
|
||||||
|
{showModal && weather && (
|
||||||
|
<div
|
||||||
|
onClick={() => setShowModal(false)}
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
inset: 0,
|
||||||
|
background: 'rgba(0,0,0,0.7)',
|
||||||
|
backdropFilter: 'blur(8px)',
|
||||||
|
zIndex: 100,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onClick={e => e.stopPropagation()}
|
||||||
|
style={{
|
||||||
|
background: '#13131f',
|
||||||
|
border: '1px solid rgba(255,255,255,0.1)',
|
||||||
|
borderRadius: 20,
|
||||||
|
padding: 28,
|
||||||
|
minWidth: 320,
|
||||||
|
maxWidth: 400,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
|
||||||
|
<span style={{ fontSize: 40 }}>{getWeatherEmoji(weather.desc)}</span>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 36, fontWeight: 700, lineHeight: 1 }}>{weather.temp}°C</div>
|
||||||
|
<div style={{ fontSize: 15, color: 'var(--text-secondary)', marginTop: 2 }}>{weather.desc}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: 16, marginBottom: 20 }}>
|
||||||
|
<div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
||||||
|
<Droplets size={13} style={{ marginRight: 4 }} />
|
||||||
|
Влажность: {weather.humidity}%
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
||||||
|
<Wind size={13} style={{ marginRight: 4 }} />
|
||||||
|
Ветер: {weather.windSpeed} км/ч
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
||||||
|
Ощущается: {weather.feelsLike}°
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{weather.forecast && weather.forecast.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>
|
||||||
|
Прогноз
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||||
|
{weather.forecast.map(day => {
|
||||||
|
const d = new Date(day.date)
|
||||||
|
const label = d.toLocaleDateString('ru-RU', { weekday: 'short', day: 'numeric', month: 'short' })
|
||||||
|
return (
|
||||||
|
<div key={day.date} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||||
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 80 }}>{label}</span>
|
||||||
|
<span style={{ fontSize: 16 }}>{getWeatherEmoji(day.desc)}</span>
|
||||||
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{day.desc}</span>
|
||||||
|
<span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 500 }}>
|
||||||
|
{day.maxTemp}° / {day.minTemp}°
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModal(false)}
|
||||||
|
style={{
|
||||||
|
marginTop: 20,
|
||||||
|
width: '100%',
|
||||||
|
padding: '10px',
|
||||||
|
borderRadius: 10,
|
||||||
|
background: 'rgba(255,255,255,0.05)',
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
fontSize: 14,
|
||||||
|
touchAction: 'manipulation',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Закрыть
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,141 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
|
||||||
import { Wind } from "lucide-react";
|
|
||||||
import { toggleFan, setFanPreset } from "@/lib/api";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
entityId: string;
|
|
||||||
state: string;
|
|
||||||
presetMode?: string;
|
|
||||||
onUpdate: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MODES = [
|
|
||||||
{ id: "Auto", label: "Авто", color: "#10b981" },
|
|
||||||
{ id: "Night", label: "Ночь", color: "#6366f1" },
|
|
||||||
{ id: "High", label: "Турбо", color: "#f59e0b" },
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function AirPurifierCard({ entityId, state, presetMode, onUpdate }: Props) {
|
|
||||||
const [localOn, setLocalOn] = useState(state === "on");
|
|
||||||
const [currentMode, setCurrentMode] = useState(presetMode || "Auto");
|
|
||||||
const [pending, setPending] = useState(false);
|
|
||||||
|
|
||||||
const handleToggle = useCallback(async () => {
|
|
||||||
if (pending) return;
|
|
||||||
const newState = !localOn;
|
|
||||||
setLocalOn(newState);
|
|
||||||
setPending(true);
|
|
||||||
try {
|
|
||||||
await toggleFan(entityId, newState);
|
|
||||||
onUpdate();
|
|
||||||
} catch (e) {
|
|
||||||
setLocalOn(!newState);
|
|
||||||
}
|
|
||||||
setPending(false);
|
|
||||||
}, [entityId, localOn, pending, onUpdate]);
|
|
||||||
|
|
||||||
const handleMode = useCallback(async (mode: string) => {
|
|
||||||
setCurrentMode(mode);
|
|
||||||
await setFanPreset(entityId, mode);
|
|
||||||
onUpdate();
|
|
||||||
}, [entityId, onUpdate]);
|
|
||||||
|
|
||||||
const isOn = localOn;
|
|
||||||
const activeMode = MODES.find((m) => m.id === currentMode) || MODES[0];
|
|
||||||
const accentColor = isOn ? activeMode.color : "rgba(255,255,255,0.3)";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-6 flex flex-col"
|
|
||||||
style={{
|
|
||||||
minHeight: "140px",
|
|
||||||
...(isOn ? {
|
|
||||||
background: `${activeMode.color}08`,
|
|
||||||
border: `1px solid ${activeMode.color}25`,
|
|
||||||
boxShadow: `0 0 40px ${activeMode.color}10`,
|
|
||||||
} : {})
|
|
||||||
}}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.35, delay: 0.14 }}
|
|
||||||
>
|
|
||||||
{/* Top row */}
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="w-16 h-16 rounded-2xl flex items-center justify-center flex-shrink-0"
|
|
||||||
style={{
|
|
||||||
background: isOn ? `${activeMode.color}20` : "rgba(255,255,255,0.06)",
|
|
||||||
boxShadow: isOn ? `0 0 28px ${activeMode.color}40` : "none",
|
|
||||||
}}>
|
|
||||||
<motion.div animate={isOn ? { rotate: 360 } : { rotate: 0 }}
|
|
||||||
transition={isOn ? { duration: 4, repeat: Infinity, ease: "linear" } : {}}>
|
|
||||||
<Wind size={32} color={isOn ? activeMode.color : "rgba(255,255,255,0.3)"} strokeWidth={1.5} />
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>Очиститель</div>
|
|
||||||
<div className="text-sm mt-0.5 font-medium" style={{ color: isOn ? activeMode.color : "var(--text-secondary)" }}>
|
|
||||||
{isOn ? activeMode.label : "Выключен"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Toggle — native button */}
|
|
||||||
<button
|
|
||||||
onClick={handleToggle}
|
|
||||||
style={{
|
|
||||||
width: "60px", height: "32px", borderRadius: "16px",
|
|
||||||
background: isOn ? activeMode.color : "rgba(255,255,255,0.12)",
|
|
||||||
boxShadow: isOn ? `0 0 16px ${activeMode.color}60` : "none",
|
|
||||||
border: "none", cursor: "pointer", position: "relative",
|
|
||||||
transition: "background 0.2s ease, box-shadow 0.2s ease",
|
|
||||||
flexShrink: 0,
|
|
||||||
WebkitTapHighlightColor: "transparent",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
style={{
|
|
||||||
width: "24px", height: "24px", borderRadius: "12px",
|
|
||||||
background: "white", position: "absolute", top: "4px",
|
|
||||||
boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
|
|
||||||
}}
|
|
||||||
animate={{ left: isOn ? "32px" : "4px" }}
|
|
||||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mode buttons */}
|
|
||||||
<div className="flex gap-3 mt-4">
|
|
||||||
{MODES.map((mode) => {
|
|
||||||
const isActive = currentMode === mode.id && isOn;
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={mode.id}
|
|
||||||
onClick={() => isOn && handleMode(mode.id)}
|
|
||||||
className="flex-1 py-2.5 rounded-2xl text-sm font-semibold"
|
|
||||||
style={isActive ? {
|
|
||||||
background: `${mode.color}22`,
|
|
||||||
border: `1.5px solid ${mode.color}60`,
|
|
||||||
color: mode.color,
|
|
||||||
boxShadow: `0 0 14px ${mode.color}30`,
|
|
||||||
cursor: "pointer",
|
|
||||||
WebkitTapHighlightColor: "transparent",
|
|
||||||
} : {
|
|
||||||
background: "rgba(255,255,255,0.05)",
|
|
||||||
border: "1px solid rgba(255,255,255,0.08)",
|
|
||||||
color: isOn ? "var(--text-secondary)" : "rgba(255,255,255,0.15)",
|
|
||||||
cursor: isOn ? "pointer" : "default",
|
|
||||||
WebkitTapHighlightColor: "transparent",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{mode.label}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
|
||||||
import { Lightbulb } from "lucide-react";
|
|
||||||
import { toggleLight, setLightBrightness } from "@/lib/api";
|
|
||||||
import { getBrightnessPct, pctToBrightness } from "@/lib/ha";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
entityId: string;
|
|
||||||
name: string;
|
|
||||||
state: string;
|
|
||||||
brightness?: number;
|
|
||||||
showSlider?: boolean;
|
|
||||||
onUpdate: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function LightCard({ entityId, name, state, brightness, showSlider = false, onUpdate }: Props) {
|
|
||||||
// Optimistic local state — не зависим от HA mock
|
|
||||||
const [localOn, setLocalOn] = useState(state === "on");
|
|
||||||
const brightPct = getBrightnessPct(brightness);
|
|
||||||
const [localBrightness, setLocalBrightness] = useState(brightPct || 70);
|
|
||||||
const [pending, setPending] = useState(false);
|
|
||||||
|
|
||||||
const handleToggle = useCallback(async () => {
|
|
||||||
if (pending) return;
|
|
||||||
const newState = !localOn;
|
|
||||||
setLocalOn(newState); // optimistic
|
|
||||||
setPending(true);
|
|
||||||
try {
|
|
||||||
await toggleLight(entityId, newState);
|
|
||||||
onUpdate();
|
|
||||||
} catch (e) {
|
|
||||||
setLocalOn(!newState); // rollback on real error
|
|
||||||
}
|
|
||||||
setPending(false);
|
|
||||||
}, [entityId, localOn, pending, onUpdate]);
|
|
||||||
|
|
||||||
const handleBrightnessChange = useCallback(async (val: number) => {
|
|
||||||
setLocalBrightness(val);
|
|
||||||
await setLightBrightness(entityId, pctToBrightness(val));
|
|
||||||
onUpdate();
|
|
||||||
}, [entityId, onUpdate]);
|
|
||||||
|
|
||||||
const isOn = localOn;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-6 flex flex-col justify-between"
|
|
||||||
style={{
|
|
||||||
minHeight: "160px",
|
|
||||||
...(isOn ? {
|
|
||||||
background: "rgba(245,158,11,0.07)",
|
|
||||||
border: "1px solid rgba(245,158,11,0.22)",
|
|
||||||
boxShadow: "0 0 40px rgba(245,158,11,0.08), inset 0 1px 0 rgba(245,158,11,0.1)",
|
|
||||||
} : {})
|
|
||||||
}}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.35 }}
|
|
||||||
>
|
|
||||||
{/* Top row: icon + toggle */}
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<motion.div
|
|
||||||
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
|
||||||
style={{
|
|
||||||
background: isOn ? "rgba(245,158,11,0.18)" : "rgba(255,255,255,0.06)",
|
|
||||||
boxShadow: isOn ? "0 0 28px rgba(245,158,11,0.35)" : "none",
|
|
||||||
}}
|
|
||||||
animate={{ scale: isOn ? 1 : 0.97 }}
|
|
||||||
>
|
|
||||||
<Lightbulb size={32} color={isOn ? "#f59e0b" : "rgba(255,255,255,0.35)"} fill={isOn ? "#f59e0b" : "none"} strokeWidth={isOn ? 1.5 : 2} />
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Toggle switch */}
|
|
||||||
<button
|
|
||||||
onClick={handleToggle}
|
|
||||||
style={{
|
|
||||||
width: "60px",
|
|
||||||
height: "32px",
|
|
||||||
borderRadius: "16px",
|
|
||||||
background: isOn ? "#f59e0b" : "rgba(255,255,255,0.12)",
|
|
||||||
boxShadow: isOn ? "0 0 16px rgba(245,158,11,0.5)" : "none",
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
position: "relative",
|
|
||||||
transition: "background 0.2s ease, box-shadow 0.2s ease",
|
|
||||||
flexShrink: 0,
|
|
||||||
WebkitTapHighlightColor: "transparent",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
style={{
|
|
||||||
width: "24px",
|
|
||||||
height: "24px",
|
|
||||||
borderRadius: "12px",
|
|
||||||
background: "white",
|
|
||||||
position: "absolute",
|
|
||||||
top: "4px",
|
|
||||||
boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
|
|
||||||
}}
|
|
||||||
animate={{ left: isOn ? "32px" : "4px" }}
|
|
||||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Name + state */}
|
|
||||||
<div className="mt-4">
|
|
||||||
<div className="text-xl font-bold leading-tight" style={{ color: isOn ? "#f59e0b" : "var(--text-primary)" }}>
|
|
||||||
{name}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm mt-1 font-medium" style={{ color: isOn ? "rgba(245,158,11,0.7)" : "var(--text-secondary)" }}>
|
|
||||||
{isOn ? (showSlider ? `Яркость ${localBrightness}%` : "Включён") : "Выключен"}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AnimatePresence>
|
|
||||||
{showSlider && isOn && (
|
|
||||||
<motion.div className="mt-4" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }}>
|
|
||||||
<input
|
|
||||||
type="range" min={5} max={100} value={localBrightness}
|
|
||||||
onChange={(e) => setLocalBrightness(parseInt(e.target.value))}
|
|
||||||
onMouseUp={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
|
|
||||||
onTouchEnd={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
|
|
||||||
className="w-full"
|
|
||||||
style={{ accentColor: "#f59e0b" }}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,140 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { Target } from "lucide-react";
|
|
||||||
|
|
||||||
interface Saving {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
current_amount: number;
|
|
||||||
target_amount: number;
|
|
||||||
color?: string;
|
|
||||||
icon?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
savings: Saving[];
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatAmount(n: number): string {
|
|
||||||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}М`;
|
|
||||||
if (n >= 1_000) return `${Math.round(n / 1_000)}К`;
|
|
||||||
return String(n);
|
|
||||||
}
|
|
||||||
|
|
||||||
const COLORS = ["#f59e0b", "#3b82f6", "#10b981", "#8b5cf6", "#f43f5e"];
|
|
||||||
|
|
||||||
export default function SavingsCard({ savings }: Props) {
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-6 h-full flex flex-col"
|
|
||||||
style={{
|
|
||||||
background: "rgba(245,158,11,0.04)",
|
|
||||||
border: "1px solid rgba(245,158,11,0.15)",
|
|
||||||
}}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.35, delay: 0.21 }}
|
|
||||||
whileHover={{ scale: 1.01 }}
|
|
||||||
>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center gap-3 mb-5">
|
|
||||||
<div
|
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
|
||||||
style={{
|
|
||||||
background: "rgba(245,158,11,0.2)",
|
|
||||||
boxShadow: "0 0 16px rgba(245,158,11,0.3)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Target size={20} color="#f59e0b" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
className="text-base font-bold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
Накопления
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-xs"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{savings.length} {savings.length === 1 ? "цель" : "целей"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 space-y-4">
|
|
||||||
{savings.map((s, i) => {
|
|
||||||
const pct = Math.min(
|
|
||||||
100,
|
|
||||||
Math.round((s.current_amount / s.target_amount) * 100)
|
|
||||||
);
|
|
||||||
const color = s.color || COLORS[i % COLORS.length];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
key={s.id}
|
|
||||||
initial={{ opacity: 0, y: 10 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.1 + i * 0.1 }}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{s.icon && <span className="text-base">{s.icon}</span>}
|
|
||||||
<span
|
|
||||||
className="text-sm font-semibold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{s.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className="text-sm font-black"
|
|
||||||
style={{ color }}
|
|
||||||
>
|
|
||||||
{pct}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Progress bar with glow */}
|
|
||||||
<div className="progress-bar">
|
|
||||||
<motion.div
|
|
||||||
className="h-full rounded-full"
|
|
||||||
style={{
|
|
||||||
background: `linear-gradient(90deg, ${color}80, ${color})`,
|
|
||||||
boxShadow: `0 0 12px ${color}60`,
|
|
||||||
}}
|
|
||||||
initial={{ width: "0%" }}
|
|
||||||
animate={{ width: `${pct}%` }}
|
|
||||||
transition={{
|
|
||||||
duration: 1.2,
|
|
||||||
delay: 0.2 + i * 0.15,
|
|
||||||
ease: "easeOut",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="flex justify-between text-xs mt-1.5"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
<span>{formatAmount(s.current_amount)} ₽</span>
|
|
||||||
<span>из {formatAmount(s.target_amount)} ₽</span>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
{savings.length === 0 && (
|
|
||||||
<div
|
|
||||||
className="text-center py-6 text-sm"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
Нет данных о накоплениях
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,185 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
|
||||||
import { CheckCircle2, Circle, Plus, ListTodo } from "lucide-react";
|
|
||||||
import { createTask, toggleTask } from "@/lib/api";
|
|
||||||
import AddTaskModal from "../AddTaskModal";
|
|
||||||
|
|
||||||
interface Task {
|
|
||||||
id: number;
|
|
||||||
title: string;
|
|
||||||
done: boolean;
|
|
||||||
priority?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
tasks: Task[];
|
|
||||||
onUpdate: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TasksCard({ tasks, onUpdate }: Props) {
|
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
|
||||||
const [localTasks, setLocalTasks] = useState<Task[]>(tasks);
|
|
||||||
|
|
||||||
const handleToggle = useCallback(
|
|
||||||
async (task: Task) => {
|
|
||||||
setLocalTasks((prev) =>
|
|
||||||
prev.map((t) => (t.id === task.id ? { ...t, done: !t.done } : t))
|
|
||||||
);
|
|
||||||
await toggleTask(task.id, !task.done);
|
|
||||||
onUpdate();
|
|
||||||
},
|
|
||||||
[onUpdate]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleAdd = useCallback(
|
|
||||||
async (title: string) => {
|
|
||||||
const newTask = { id: Date.now(), title, done: false };
|
|
||||||
setLocalTasks((prev) => [newTask, ...prev]);
|
|
||||||
await createTask(title);
|
|
||||||
onUpdate();
|
|
||||||
},
|
|
||||||
[onUpdate]
|
|
||||||
);
|
|
||||||
|
|
||||||
const pending = localTasks.filter((t) => !t.done);
|
|
||||||
const done = localTasks.filter((t) => t.done);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-6 h-full flex flex-col"
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.35, delay: 0.14 }}
|
|
||||||
whileHover={{ scale: 1.005 }}
|
|
||||||
>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
|
||||||
style={{
|
|
||||||
background: "rgba(139,92,246,0.18)",
|
|
||||||
boxShadow: "0 0 18px rgba(139,92,246,0.3)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ListTodo size={20} color="#8b5cf6" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
className="text-base font-bold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
Задачи
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-xs"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{pending.length > 0
|
|
||||||
? `${pending.length} из ${localTasks.length} осталось`
|
|
||||||
: "Всё готово!"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Add button */}
|
|
||||||
<motion.button
|
|
||||||
onClick={() => setModalOpen(true)}
|
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
|
||||||
style={{
|
|
||||||
background: "linear-gradient(135deg, #8b5cf6, #6366f1)",
|
|
||||||
boxShadow: "0 0 18px rgba(139,92,246,0.45)",
|
|
||||||
}}
|
|
||||||
whileTap={{ scale: 0.82 }}
|
|
||||||
>
|
|
||||||
<Plus size={20} color="white" strokeWidth={2.5} />
|
|
||||||
</motion.button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Task list */}
|
|
||||||
<div className="flex-1 overflow-y-auto space-y-2 pr-0.5">
|
|
||||||
<AnimatePresence initial={false}>
|
|
||||||
{localTasks.length === 0 && (
|
|
||||||
<motion.div
|
|
||||||
className="flex flex-col items-center justify-center h-full py-8 gap-3"
|
|
||||||
initial={{ opacity: 0, scale: 0.9 }}
|
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
|
||||||
>
|
|
||||||
<div className="text-4xl">🎉</div>
|
|
||||||
<div
|
|
||||||
className="text-sm font-medium"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
Всё сделано на сегодня!
|
|
||||||
</div>
|
|
||||||
<motion.button
|
|
||||||
onClick={() => setModalOpen(true)}
|
|
||||||
className="mt-2 px-5 py-2.5 rounded-xl text-sm font-semibold"
|
|
||||||
style={{
|
|
||||||
background: "linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2))",
|
|
||||||
border: "1px solid rgba(139,92,246,0.35)",
|
|
||||||
color: "#8b5cf6",
|
|
||||||
}}
|
|
||||||
whileTap={{ scale: 0.9 }}
|
|
||||||
>
|
|
||||||
+ Добавить задачу
|
|
||||||
</motion.button>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{localTasks.map((task) => (
|
|
||||||
<motion.div
|
|
||||||
key={task.id}
|
|
||||||
layout
|
|
||||||
initial={{ opacity: 0, x: -12, height: 0 }}
|
|
||||||
animate={{ opacity: 1, x: 0, height: "auto" }}
|
|
||||||
exit={{ opacity: 0, x: 12, height: 0 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
|
||||||
className="flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
|
|
||||||
style={{
|
|
||||||
background: task.done
|
|
||||||
? "rgba(139,92,246,0.05)"
|
|
||||||
: "rgba(255,255,255,0.04)",
|
|
||||||
border: task.done
|
|
||||||
? "1px solid rgba(139,92,246,0.15)"
|
|
||||||
: "1px solid rgba(255,255,255,0.06)",
|
|
||||||
}}
|
|
||||||
onClick={() => handleToggle(task)}
|
|
||||||
whileTap={{ scale: 0.97 }}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
initial={{ scale: 0.8 }}
|
|
||||||
animate={{ scale: 1 }}
|
|
||||||
>
|
|
||||||
{task.done ? (
|
|
||||||
<CheckCircle2 size={20} color="#8b5cf6" strokeWidth={2} />
|
|
||||||
) : (
|
|
||||||
<Circle size={20} color="rgba(255,255,255,0.3)" strokeWidth={1.5} />
|
|
||||||
)}
|
|
||||||
</motion.div>
|
|
||||||
<span
|
|
||||||
className="text-sm font-medium flex-1 leading-snug"
|
|
||||||
style={{
|
|
||||||
color: task.done ? "var(--text-secondary)" : "var(--text-primary)",
|
|
||||||
textDecoration: task.done ? "line-through" : "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{task.title}
|
|
||||||
</span>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<AddTaskModal
|
|
||||||
open={modalOpen}
|
|
||||||
onClose={() => setModalOpen(false)}
|
|
||||||
onAdd={handleAdd}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { Thermometer, Plus, Minus } from "lucide-react";
|
|
||||||
import { setClimateTemp } from "@/lib/api";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
entityId: string;
|
|
||||||
currentTemp?: number;
|
|
||||||
targetTemp?: number;
|
|
||||||
state: string;
|
|
||||||
onUpdate: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TemperatureCard({
|
|
||||||
entityId,
|
|
||||||
currentTemp,
|
|
||||||
targetTemp,
|
|
||||||
state,
|
|
||||||
onUpdate,
|
|
||||||
}: Props) {
|
|
||||||
const [target, setTarget] = useState(targetTemp || 22);
|
|
||||||
const isHeating = state === "heat";
|
|
||||||
const isActive = state !== "off";
|
|
||||||
|
|
||||||
const adjust = useCallback(
|
|
||||||
async (delta: number) => {
|
|
||||||
const next = Math.min(30, Math.max(16, target + delta));
|
|
||||||
setTarget(next);
|
|
||||||
await setClimateTemp(entityId, next);
|
|
||||||
onUpdate();
|
|
||||||
},
|
|
||||||
[target, entityId, onUpdate]
|
|
||||||
);
|
|
||||||
|
|
||||||
const accentColor = isHeating ? "#f43f5e" : "#3b82f6";
|
|
||||||
const accentBg = isHeating ? "rgba(244,63,94,0.08)" : "rgba(59,130,246,0.08)";
|
|
||||||
const accentBorder = isHeating ? "rgba(244,63,94,0.2)" : "rgba(59,130,246,0.2)";
|
|
||||||
const accentGlow = isHeating ? "rgba(244,63,94,0.25)" : "rgba(59,130,246,0.2)";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-6 h-full flex flex-col justify-between"
|
|
||||||
style={
|
|
||||||
isActive
|
|
||||||
? {
|
|
||||||
background: accentBg,
|
|
||||||
border: `1px solid ${accentBorder}`,
|
|
||||||
boxShadow: `0 0 40px ${accentGlow}`,
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.35, delay: 0.07 }}
|
|
||||||
whileHover={{ scale: 1.01 }}
|
|
||||||
>
|
|
||||||
{/* Icon row */}
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<motion.div
|
|
||||||
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
|
||||||
style={{
|
|
||||||
background: isActive ? `${accentColor}22` : "rgba(255,255,255,0.06)",
|
|
||||||
boxShadow: isActive ? `0 0 28px ${accentGlow}` : "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Thermometer
|
|
||||||
size={32}
|
|
||||||
color={isActive ? accentColor : "rgba(255,255,255,0.35)"}
|
|
||||||
strokeWidth={1.5}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Status badge */}
|
|
||||||
<div
|
|
||||||
className="px-3 py-1 rounded-full text-xs font-semibold"
|
|
||||||
style={{
|
|
||||||
background: isActive ? `${accentColor}18` : "rgba(255,255,255,0.06)",
|
|
||||||
color: isActive ? accentColor : "var(--text-secondary)",
|
|
||||||
border: `1px solid ${isActive ? accentColor + "40" : "rgba(255,255,255,0.08)"}`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isHeating ? "Нагрев" : isActive ? "Охлаждение" : "Выкл"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Current temperature — BIG */}
|
|
||||||
<div className="my-4">
|
|
||||||
<div
|
|
||||||
className="font-black leading-none tracking-tight"
|
|
||||||
style={{
|
|
||||||
fontSize: "56px",
|
|
||||||
color: isActive ? accentColor : "var(--text-primary)",
|
|
||||||
textShadow: isActive ? `0 0 40px ${accentColor}60` : "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{currentTemp?.toFixed(1) ?? "—"}°
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-sm mt-1"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
текущая температура
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Target temperature controls */}
|
|
||||||
<div
|
|
||||||
className="flex items-center justify-between px-4 py-3 rounded-2xl"
|
|
||||||
style={{
|
|
||||||
background: "rgba(255,255,255,0.04)",
|
|
||||||
border: "1px solid rgba(255,255,255,0.07)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="text-sm font-medium"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
Цель
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<motion.button
|
|
||||||
onClick={() => adjust(-0.5)}
|
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
|
||||||
style={{
|
|
||||||
background: "rgba(255,255,255,0.08)",
|
|
||||||
border: "1px solid rgba(255,255,255,0.1)",
|
|
||||||
}}
|
|
||||||
whileTap={{ scale: 0.82 }}
|
|
||||||
>
|
|
||||||
<Minus size={16} color="var(--text-primary)" />
|
|
||||||
</motion.button>
|
|
||||||
|
|
||||||
<span
|
|
||||||
className="text-2xl font-bold min-w-[56px] text-center"
|
|
||||||
style={{ color: accentColor }}
|
|
||||||
>
|
|
||||||
{target}°
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<motion.button
|
|
||||||
onClick={() => adjust(0.5)}
|
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
|
||||||
style={{
|
|
||||||
background: `${accentColor}22`,
|
|
||||||
border: `1px solid ${accentColor}50`,
|
|
||||||
}}
|
|
||||||
whileTap={{ scale: 0.82 }}
|
|
||||||
>
|
|
||||||
<Plus size={16} color={accentColor} />
|
|
||||||
</motion.button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,174 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { Droplets, Wind } from "lucide-react";
|
|
||||||
|
|
||||||
function getWeatherEmoji(code: string): string {
|
|
||||||
const c = parseInt(code);
|
|
||||||
if (c === 113) return "☀️";
|
|
||||||
if (c === 116) return "⛅";
|
|
||||||
if (c === 119 || c === 122) return "☁️";
|
|
||||||
if (c >= 176 && c <= 182) return "🌦️";
|
|
||||||
if (c >= 185 && c <= 200) return "🌧️";
|
|
||||||
if (c >= 200 && c <= 210) return "⛈️";
|
|
||||||
if (c >= 210 && c <= 260) return "❄️";
|
|
||||||
if (c >= 260 && c <= 300) return "🌨️";
|
|
||||||
if (c >= 300 && c <= 400) return "🌧️";
|
|
||||||
return "🌤️";
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatDate(dateStr: string): string {
|
|
||||||
const d = new Date(dateStr + "T12:00:00");
|
|
||||||
return d.toLocaleDateString("ru-RU", { weekday: "short", day: "numeric" });
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
weather: any;
|
|
||||||
compact?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function WeatherCard({ weather, compact }: Props) {
|
|
||||||
if (!weather) {
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-6 h-full flex flex-col items-center justify-center gap-3"
|
|
||||||
style={{
|
|
||||||
background: "rgba(59,130,246,0.03)",
|
|
||||||
border: "1px solid rgba(59,130,246,0.1)",
|
|
||||||
}}
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
>
|
|
||||||
<div className="text-3xl animate-pulse">🌤️</div>
|
|
||||||
<div className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
Загрузка погоды...
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const hasData = weather.temp && weather.temp !== "—";
|
|
||||||
|
|
||||||
if (!hasData) {
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-6 h-full flex flex-col items-center justify-center gap-2"
|
|
||||||
style={{
|
|
||||||
background: "rgba(59,130,246,0.03)",
|
|
||||||
border: "1px solid rgba(59,130,246,0.1)",
|
|
||||||
}}
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
>
|
|
||||||
<div className="text-3xl">🌧️</div>
|
|
||||||
<div className="text-sm text-center" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
Нет данных о погоде
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="glass-card p-5 h-full flex flex-col"
|
|
||||||
style={{
|
|
||||||
background: "rgba(59,130,246,0.05)",
|
|
||||||
border: "1px solid rgba(59,130,246,0.15)",
|
|
||||||
}}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.35, delay: 0.21 }}
|
|
||||||
whileHover={{ scale: 1.01 }}
|
|
||||||
>
|
|
||||||
{/* Location */}
|
|
||||||
<div
|
|
||||||
className="text-xs font-medium mb-2"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
📍 Санкт-Петербург
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Current weather */}
|
|
||||||
<div className="flex items-center gap-3 mb-3">
|
|
||||||
<div className={compact ? "text-3xl leading-none" : "text-4xl leading-none"}>
|
|
||||||
{getWeatherEmoji(weather.weatherCode)}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
className="font-black leading-none"
|
|
||||||
style={{
|
|
||||||
fontSize: compact ? "36px" : "42px",
|
|
||||||
color: "var(--text-primary)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{weather.temp}°
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-xs mt-0.5"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{weather.desc}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats */}
|
|
||||||
<div className="flex gap-3 mb-3 flex-wrap">
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Droplets size={12} color="#3b82f6" />
|
|
||||||
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
{weather.humidity}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Wind size={12} color="#8b5cf6" />
|
|
||||||
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
{weather.windSpeed} км/ч
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
|
||||||
Ощущ. {weather.feelsLike}°
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Forecast */}
|
|
||||||
<div className="flex gap-2 mt-auto">
|
|
||||||
{(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
|
|
||||||
<motion.div
|
|
||||||
key={day.date}
|
|
||||||
className="flex-1 rounded-xl p-2 text-center"
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
i === 0
|
|
||||||
? "rgba(59,130,246,0.14)"
|
|
||||||
: "rgba(255,255,255,0.04)",
|
|
||||||
border:
|
|
||||||
i === 0
|
|
||||||
? "1px solid rgba(59,130,246,0.28)"
|
|
||||||
: "1px solid rgba(255,255,255,0.06)",
|
|
||||||
}}
|
|
||||||
initial={{ opacity: 0, y: 8 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.3 + i * 0.08 }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="text-xs mb-0.5 font-medium"
|
|
||||||
style={{ color: "var(--text-secondary)" }}
|
|
||||||
>
|
|
||||||
{i === 0 ? "Сег." : formatDate(day.date)}
|
|
||||||
</div>
|
|
||||||
<div className="text-base mb-0.5">
|
|
||||||
{getWeatherEmoji(day.weatherCode)}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="text-xs font-bold"
|
|
||||||
style={{ color: "var(--text-primary)" }}
|
|
||||||
>
|
|
||||||
{day.maxTemp}°/{day.minTemp}°
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
|
||||||
import WeatherCard from "./WeatherCard";
|
|
||||||
import SavingsCard from "./SavingsCard";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
weather: any;
|
|
||||||
savings: any[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function WeatherSavingsCard({ weather, savings }: Props) {
|
|
||||||
const [view, setView] = useState<"weather" | "savings">("weather");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="h-full flex flex-col gap-2">
|
|
||||||
{/* Toggle pills */}
|
|
||||||
<div
|
|
||||||
className="flex rounded-2xl p-1 gap-1"
|
|
||||||
style={{
|
|
||||||
background: "rgba(255,255,255,0.04)",
|
|
||||||
border: "1px solid rgba(255,255,255,0.07)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{[
|
|
||||||
{ id: "weather", label: "🌤 Погода" },
|
|
||||||
{ id: "savings", label: "💰 Цели" },
|
|
||||||
].map((tab) => (
|
|
||||||
<motion.button
|
|
||||||
key={tab.id}
|
|
||||||
onClick={() => setView(tab.id as "weather" | "savings")}
|
|
||||||
className="flex-1 py-1.5 rounded-xl text-xs font-semibold relative"
|
|
||||||
style={{
|
|
||||||
color: view === tab.id ? "var(--text-primary)" : "var(--text-secondary)",
|
|
||||||
}}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
>
|
|
||||||
{view === tab.id && (
|
|
||||||
<motion.div
|
|
||||||
className="absolute inset-0 rounded-xl"
|
|
||||||
style={{
|
|
||||||
background: "rgba(255,255,255,0.08)",
|
|
||||||
border: "1px solid rgba(255,255,255,0.12)",
|
|
||||||
}}
|
|
||||||
layoutId="wsToggle"
|
|
||||||
transition={{ type: "spring", stiffness: 500, damping: 35 }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<span className="relative z-10">{tab.label}</span>
|
|
||||||
</motion.button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="flex-1 min-h-0">
|
|
||||||
<AnimatePresence mode="wait">
|
|
||||||
{view === "weather" ? (
|
|
||||||
<motion.div
|
|
||||||
key="weather"
|
|
||||||
className="h-full"
|
|
||||||
initial={{ opacity: 0, x: -10 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
exit={{ opacity: 0, x: 10 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
|
||||||
>
|
|
||||||
<WeatherCard weather={weather} />
|
|
||||||
</motion.div>
|
|
||||||
) : (
|
|
||||||
<motion.div
|
|
||||||
key="savings"
|
|
||||||
className="h-full"
|
|
||||||
initial={{ opacity: 0, x: 10 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
exit={{ opacity: 0, x: -10 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
|
||||||
>
|
|
||||||
<SavingsCard savings={savings} />
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user