tylen/nyipyatki
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

init frontend

Browse Source
This commit is contained in:
tylen 2025-10-29 14:57:44 +02:00
parent 21987f02cc
commit 13ae6c6942
6 changed files with 194 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/App.css
View File

@ -1,42 +1,11 @@
#root {
width: 100%;
max-width: 1280px;
min-width: 375px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.mainText {
color: #5f5e5e;
}

13
frontend/src/App.tsx
View File

@ -1,16 +1,13 @@
import './App.css'
import Greeting from './components/Greeting'
import Hosting from './components/Hosting'
function App() {
return (
<>
<h1>Приглашение на Новый год 2025-2026 🎄</h1>
<p className="mainText">
Дорогие, Пятки! 🦶
Приглашаем вас отпраздновать предстоящий Новый Год 2025-2026 с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
Мы ожидаем вас с 30.12.2025. Праздник обычно длится до 01.01.2025, но если вам будет безумно плохо, то иожно остаться и до второго числа.
</p>
<Greeting/>
<br/>
<Hosting/>
</>
)
}

16
frontend/src/components/Greeting.tsx Normal file
View File

@ -0,0 +1,16 @@
function Greeting() {
return (
<>
<h1>Приглашение на Новый год 2025-2026 🎄</h1>
<p className="mainText">
Дорогие, Пятки! 🦶
Приглашаем вас отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
Мы ожидаем вас с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если вам будет безумно плохо, то иожно остаться и до второго числа.
</p>
</>
)
}
export default Greeting;

84
frontend/src/components/Hosting.tsx Normal file
View File

@ -0,0 +1,84 @@
import { useState } from "react";
import useFetchHosting from "../utils/fetchHosting";
interface ReserveButtonProps {
update: (name: string, id: number) => void,
reservedBy: string,
id: number,
}
const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
const { reservedBy, update, id } = props;
const [name, setName] = useState(reservedBy);
const isReserved = reservedBy !== '';
const handleReserve = async () => {
if (name.trim()) {
await update(name, id); // Call the update function from props with the name and id
}
};
return (
<>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Введите ваше имя"
disabled={isReserved} // Disable if already reserved
/>
<button onClick={handleReserve} disabled={isReserved}>
{isReserved ? 'Занято' : 'Занять'}
</button>
</>
);
};
function Hosting() {
const { data, error, loading, update } = useFetchHosting();
return (
<>
<h2>Поселение</h2>
<p>
Мы готовы вас приютить в наших 150 квадратах. Хоть дом и кажется большим,
но больше 5 гостей уместить будет сложно (но возможно!). При этом, если
вы не хотите тесниться, то рядом с нами есть
<a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>,
а так же
<a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
(Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
<br />
На данный момент мы можем вместить 5 гостей без лишних усилий.
Это подразумевает:
</p>
{loading && <div>Loading...</div>}
{error && <div>Error</div>}
{data && (
<div>
<table>
<thead>
<tr>
<th>Размещение</th>
<th>Вместительность</th>
<th>Бронирование</th>
</tr>
</thead>
<tbody>
{Object.entries(data).map(([id, item]) => (
<tr key={id}>
<td>{item.name}</td>
<td>{item.capacity}</td>
<td>{<ReserveButton update={update} reservedBy={item.reservedBy} id={id}/>}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</>
);
}
export default Hosting;

11
frontend/src/types/index.d.ts vendored Normal file
View File

@ -0,0 +1,11 @@
// src/types/index.d.ts
export interface Furniture {
reservedBy: string;
name: string;
capacity: number;
}
export interface Hosting {
[key: number]: Furniture;
}

76
frontend/src/utils/fetchHosting.tsx Normal file
View File

@ -0,0 +1,76 @@
import { useState, useEffect } from 'react';
import type { Hosting } from '../types';
const mockData: Hosting = {
1: {
reservedBy: "",
name: "Матрац 160см",
capacity: 2
},
2: {
reservedBy: "Vasya",
name: "Кровать 120см",
capacity: 2
},
3: {
reservedBy: "",
name: "Диван",
capacity: 1
},
};
const useFetchHosting = () => {
const [data, setData] = useState(mockData);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const fetchData = async () => {
setLoading(true);
setError(null);
try {
const response = await fetch('https://example.backend.com/hosting');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (error) {
setError(error instanceof Error ? error.message : 'Unknown error');
} finally {
setLoading(false);
}
};
const updateData = async (name: string, id: number) => {
setLoading(true);
setError(null);
try {
const response = await fetch(`https://example.backend.com/hosting/${id}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ reservedBy: name })
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
// Optional: Fetch the updated data after reservation
await fetchData();
} catch (error) {
setError(error instanceof Error ? error.message : 'Unknown error');
} finally {
setLoading(false);
}
};
useEffect(() => {
//fetchData(); // Initial fetch on mount
}, []);
return { data, error, loading, refetch: fetchData, update: updateData };
};
export default useFetchHosting;