feat: Implement main application shell with navigation and color scheme toggle
- Added Appshell component with responsive navbar and main content area - Integrated ColorSchemeToggle for light/dark mode switching - Created Welcome component with styled title and introductory text - Developed ChatPage for LLM interaction with WebSocket support - Implemented Biblioteca for managing notes with rich text editor - Added LoginPage for user authentication with error handling - Introduced MessageList and MessageBubble components for chat messages - Styled components with CSS modules for consistent design
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
import { AppShellWithMenu } from '../FitzStudio/Appshell/Appshell';
|
||||
import { Card, Text, Container } from '@mantine/core';
|
||||
|
||||
export function Camara_noir() {
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<Container
|
||||
size="lg"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 16,
|
||||
}}
|
||||
>
|
||||
<Card shadow="sm" padding="xl" radius="md" withBorder>
|
||||
<Text size="lg" mb="md">
|
||||
Cámara Noir en Vivo
|
||||
</Text>
|
||||
<img
|
||||
src="http://10.8.0.9:8000/video"
|
||||
alt="Stream MJPEG en vivo desde Raspberry Pi"
|
||||
style={{
|
||||
width: '640px',
|
||||
height: '480px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
objectFit: 'cover',
|
||||
}}
|
||||
/>
|
||||
<Text size="sm" color="dimmed" mt="sm">
|
||||
Transmisión MJPEG en vivo vía FastAPI / libcamera-vid
|
||||
</Text>
|
||||
</Card>
|
||||
</Container>
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
|
||||
import { LlamadorAPI } from './LlamadorAPI';
|
||||
import { AppShellWithMenu } from '../FitzStudio/Appshell/Appshell';
|
||||
|
||||
|
||||
export function Consulta_API() {
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<LlamadorAPI />
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Grid } from '@mantine/core';
|
||||
import { AppShellWithMenu } from '../FitzStudio/Appshell/Appshell';
|
||||
import { GridDashboard } from './Grid_dashboard_component';
|
||||
|
||||
export function Grid_Dashboard() {
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
|
||||
|
||||
<GridDashboard></GridDashboard>
|
||||
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import { Card, Text, Switch, Group, useMantineTheme, useComputedColorScheme } from '@mantine/core';
|
||||
import { Rnd } from 'react-rnd';
|
||||
import { useState } from 'react';
|
||||
|
||||
const GRID_SIZE = 30;
|
||||
|
||||
function hexToRgba(hex: string, alpha: number): string {
|
||||
const sanitized = hex.replace('#', '');
|
||||
const bigint = parseInt(sanitized, 16);
|
||||
|
||||
const r = (bigint >> 16) & 255;
|
||||
const g = (bigint >> 8) & 255;
|
||||
const b = bigint & 255;
|
||||
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||||
}
|
||||
|
||||
interface CardData {
|
||||
id: string;
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
const initialCards: CardData[] = [
|
||||
{ id: '1', x: 0, y: 0, width: GRID_SIZE * 2, height: GRID_SIZE * 2 },
|
||||
{ id: '2', x: GRID_SIZE * 2, y: 0, width: GRID_SIZE * 3, height: GRID_SIZE * 2 },
|
||||
{ id: '3', x: GRID_SIZE * 3, y: 0, width: GRID_SIZE * 3, height: GRID_SIZE * 2 },
|
||||
];
|
||||
|
||||
export const GridDashboard = () => {
|
||||
const theme = useMantineTheme();
|
||||
const colorScheme = useComputedColorScheme(); // ✅ directamente 'light' o 'dark'
|
||||
const isDark = colorScheme === 'dark';
|
||||
|
||||
// Color de la rejilla adaptado al modo del tema
|
||||
const gridBaseColor = isDark ? theme.colors.dark[4] : theme.colors.gray[3];
|
||||
const gridColor = hexToRgba(gridBaseColor, 0.25); // Ajusta la opacidad aquí
|
||||
|
||||
const [cards, setCards] = useState<CardData[]>(initialCards);
|
||||
const [showGrid, setShowGrid] = useState(true);
|
||||
|
||||
const updateCard = (id: string, updates: Partial<CardData>) => {
|
||||
setCards((prev) =>
|
||||
prev.map((card) => (card.id === id ? { ...card, ...updates } : card))
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Group mb="xs">
|
||||
<Switch
|
||||
checked={showGrid}
|
||||
onChange={(event) => setShowGrid(event.currentTarget.checked)}
|
||||
label="Mostrar cuadrícula"
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '700px',
|
||||
backgroundSize: `${GRID_SIZE}px ${GRID_SIZE}px`,
|
||||
backgroundImage: showGrid
|
||||
? `linear-gradient(to right, ${gridColor} 1px, transparent 1px),
|
||||
linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`
|
||||
: 'none',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{cards.map((card) => (
|
||||
<Rnd
|
||||
key={card.id}
|
||||
size={{
|
||||
width: Math.round(card.width / GRID_SIZE) * GRID_SIZE,
|
||||
height: Math.round(card.height / GRID_SIZE) * GRID_SIZE,
|
||||
}}
|
||||
position={{ x: card.x, y: card.y }}
|
||||
minWidth={GRID_SIZE * 8}
|
||||
minHeight={GRID_SIZE * 8}
|
||||
bounds="parent"
|
||||
grid={[GRID_SIZE, GRID_SIZE]}
|
||||
onDragStop={(_, d) =>
|
||||
updateCard(card.id, {
|
||||
x: Math.round(d.x / GRID_SIZE) * GRID_SIZE,
|
||||
y: Math.round(d.y / GRID_SIZE) * GRID_SIZE,
|
||||
})
|
||||
}
|
||||
onResizeStop={(_, __, ref, ___, pos) =>
|
||||
updateCard(card.id, {
|
||||
width: Math.round(ref.offsetWidth / GRID_SIZE) * GRID_SIZE,
|
||||
height: Math.round(ref.offsetHeight / GRID_SIZE) * GRID_SIZE,
|
||||
x: Math.round(pos.x / GRID_SIZE) * GRID_SIZE,
|
||||
y: Math.round(pos.y / GRID_SIZE) * GRID_SIZE,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Card
|
||||
shadow="sm"
|
||||
padding="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
style={{ height: '100%', userSelect: 'none' }}
|
||||
>
|
||||
<Text fw={500}>Card {card.id}</Text>
|
||||
<Text size="sm">Mueve o redimensiona</Text>
|
||||
</Card>
|
||||
</Rnd>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,136 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
TextInput,
|
||||
Textarea,
|
||||
Button,
|
||||
Box,
|
||||
Center,
|
||||
Stack,
|
||||
Badge,
|
||||
Group,
|
||||
} from '@mantine/core';
|
||||
import { MetodoSelect } from './MetodoSelect';
|
||||
import { useMantineTheme } from '@mantine/core';
|
||||
|
||||
export function LlamadorAPI() {
|
||||
const [direccion, setDireccion] = useState('http://localhost:8000/api/v1/ping/');
|
||||
const [metodo, setMetodo] = useState('GET');
|
||||
const [contenido, setContenido] = useState('');
|
||||
const [respuesta, setRespuesta] = useState('');
|
||||
const [codigoRespuesta, setCodigoRespuesta] = useState<number | null>(null);
|
||||
|
||||
const colorCodigo = (status: number): string => {
|
||||
if (status >= 200 && status < 300) return 'green';
|
||||
if (status >= 300 && status < 400) return 'yellow';
|
||||
if (status >= 400 && status < 500) return 'orange';
|
||||
return 'red';
|
||||
};
|
||||
|
||||
const theme = useMantineTheme();
|
||||
|
||||
|
||||
const llamarAPI = async () => {
|
||||
try {
|
||||
const options: RequestInit = {
|
||||
method: metodo,
|
||||
mode: 'cors',
|
||||
headers: {},
|
||||
};
|
||||
|
||||
if (metodo !== 'GET') {
|
||||
options.headers = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
try {
|
||||
JSON.parse(contenido);
|
||||
options.body = contenido;
|
||||
} catch (err) {
|
||||
setRespuesta('Error: El contenido no es un JSON válido');
|
||||
setCodigoRespuesta(null);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch(direccion, options);
|
||||
setCodigoRespuesta(res.status);
|
||||
|
||||
const contentType = res.headers.get('content-type');
|
||||
|
||||
if (contentType?.includes('application/json')) {
|
||||
const data = await res.json();
|
||||
const formatted = JSON.stringify(data, null, 2);
|
||||
setRespuesta(formatted);
|
||||
} else {
|
||||
const text = await res.text();
|
||||
setRespuesta(text);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Error en la API:', error);
|
||||
setRespuesta(`Error: ${error.message || error}`);
|
||||
setCodigoRespuesta(null);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.ctrlKey && e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
llamarAPI();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [metodo, direccion, contenido]);
|
||||
|
||||
return (
|
||||
<Box style={{ flex: 1, padding: 40 }}>
|
||||
<Center style={{ height: '100%' }}>
|
||||
<Stack style={{ width: 600 }}>
|
||||
<TextInput
|
||||
label="Dirección"
|
||||
placeholder="http://localhost:8000/api/..."
|
||||
value={direccion}
|
||||
onChange={(e) => setDireccion(e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<MetodoSelect metodo={metodo} setMetodo={setMetodo} />
|
||||
|
||||
<Textarea
|
||||
label="Contenido (JSON)"
|
||||
placeholder='{"contenido": "Hola"}'
|
||||
value={contenido}
|
||||
onChange={(e) => setContenido(e.currentTarget.value)}
|
||||
autosize
|
||||
minRows={3}
|
||||
/>
|
||||
|
||||
<Button onClick={llamarAPI}
|
||||
variant="gradient"
|
||||
gradient={{
|
||||
from: theme.colors.brand[7],
|
||||
to: theme.colors.brand[4],
|
||||
}}>
|
||||
Enviar solicitud
|
||||
</Button>
|
||||
|
||||
{codigoRespuesta !== null && (
|
||||
<Group>
|
||||
<Badge color={colorCodigo(codigoRespuesta)} size="lg">
|
||||
Código: {codigoRespuesta}
|
||||
</Badge>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
<Textarea
|
||||
label="Respuesta de la API"
|
||||
value={respuesta}
|
||||
readOnly
|
||||
autosize
|
||||
minRows={6}
|
||||
/>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Select, Group } from '@mantine/core';
|
||||
import { IconCheck } from '../../assets/icons';
|
||||
|
||||
interface MetodoSelectProps {
|
||||
metodo: string;
|
||||
setMetodo: (value: string) => void;
|
||||
}
|
||||
|
||||
const metodoData = [
|
||||
{ value: 'GET', label: 'GET' },
|
||||
{ value: 'POST', label: 'POST' },
|
||||
{ value: 'PUT', label: 'PUT' },
|
||||
{ value: 'DELETE', label: 'DELETE' },
|
||||
];
|
||||
|
||||
const colorMap: Record<string, string> = {
|
||||
GET: '#10b981', // verde
|
||||
POST: '#3b82f6', // azul
|
||||
PUT: '#f59e0b', // naranja
|
||||
DELETE: '#ef4444', // rojo
|
||||
};
|
||||
|
||||
const backgroundMap: Record<string, string> = {
|
||||
GET: '#d1fae5',
|
||||
POST: '#e0f2fe',
|
||||
PUT: '#fef3c7',
|
||||
DELETE: '#fee2e2',
|
||||
};
|
||||
|
||||
export function MetodoSelect({ metodo, setMetodo }: MetodoSelectProps) {
|
||||
return (
|
||||
<Select
|
||||
label="Método"
|
||||
value={metodo}
|
||||
onChange={(value) => setMetodo(value!)}
|
||||
data={metodoData}
|
||||
renderOption={({ option, checked }) => (
|
||||
<Group style={{ color: colorMap[option.value], fontWeight: 600 }}>
|
||||
{option.label}
|
||||
{checked && <IconCheck/>}
|
||||
</Group>
|
||||
)}
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: backgroundMap[metodo],
|
||||
color: '#111',
|
||||
fontWeight: 600,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { AppShellWithMenu } from '../FitzStudio/Appshell/Appshell';
|
||||
import { Card, Grid, Title, Loader } from '@mantine/core';
|
||||
import { useEffect, useState } from 'react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
type ChartOption = any;
|
||||
|
||||
function useChartOption(endpoint: string) {
|
||||
const [option, setOption] = useState<ChartOption | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/v1/charts/${endpoint}`)
|
||||
.then((res) => res.json())
|
||||
.then((json) => setOption(json))
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false));
|
||||
}, [endpoint]);
|
||||
|
||||
return { option, loading };
|
||||
}
|
||||
|
||||
export function VisualizacionesRandom() {
|
||||
const charts = [
|
||||
{ title: 'Gráfico de barras', endpoint: 'bar' },
|
||||
{ title: 'Gráfico de líneas', endpoint: 'line' },
|
||||
{ title: 'Gráfico de pastel', endpoint: 'pie' },
|
||||
{ title: 'Scatter plot', endpoint: 'scatter' },
|
||||
];
|
||||
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<Grid>
|
||||
{charts.map(({ title, endpoint }, idx) => {
|
||||
const { option, loading } = useChartOption(endpoint);
|
||||
|
||||
return (
|
||||
<Grid.Col span={{ base: 12, sm: 6, md: 6, lg: 3 }} key={idx}>
|
||||
<Card shadow="sm" padding="lg" radius="md" withBorder>
|
||||
<Title order={4}>{title}</Title>
|
||||
{loading || !option ? (
|
||||
<Loader mt="md" />
|
||||
) : (
|
||||
<ReactECharts option={option} style={{ height: 250, marginTop: 16 }} />
|
||||
)}
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { Box, Title, Text, Button, Group, Stack, Image, Center } from '@mantine/core';
|
||||
import { useMantineTheme } from '@mantine/core';
|
||||
import { IconArrowLeft } from '../../../assets/icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MantineCardWithShader } from './HoloShader_404'; // Ajusta ruta si es necesario
|
||||
import { AppShellWithMenu } from '../Appshell/Appshell';
|
||||
|
||||
|
||||
|
||||
export function Error_404() {
|
||||
|
||||
const theme = useMantineTheme();
|
||||
|
||||
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
padding: '2rem',
|
||||
paddingTop: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '2rem',
|
||||
}}
|
||||
>
|
||||
<Stack align="center" maw={500} mx="auto">
|
||||
<MantineCardWithShader />
|
||||
<Title order={1}>Página no encontrada</Title>
|
||||
|
||||
<Text size="lg">
|
||||
Parece que la página que estás buscando no existe o fue removida. Pero no te preocupes,
|
||||
puedes volver al inicio fácilmente.
|
||||
</Text>
|
||||
|
||||
<Group mt="md">
|
||||
<Button
|
||||
component={Link}
|
||||
to="/"
|
||||
size="md"
|
||||
variant="gradient"
|
||||
gradient={{
|
||||
from: theme.colors.brand[7],
|
||||
to: theme.colors.secondary[4],
|
||||
}}
|
||||
leftSection={<IconArrowLeft width={18} height={18} />}
|
||||
>
|
||||
Volver al inicio
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { Card, Title, Box, useMantineTheme } from '@mantine/core';
|
||||
import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
|
||||
import { useRef, useMemo } from 'react';
|
||||
import * as THREE from 'three';
|
||||
|
||||
// 🎨 Utilidad para convertir hex a RGB [0–1]
|
||||
function hexToRGBArray(hex: string): [number, number, number] {
|
||||
const bigint = parseInt(hex.replace('#', ''), 16);
|
||||
return [
|
||||
((bigint >> 16) & 255) / 255,
|
||||
((bigint >> 8) & 255) / 255,
|
||||
(bigint & 255) / 255,
|
||||
];
|
||||
}
|
||||
|
||||
// ✨ Shader personalizado estilo holográfico, con color dinámico
|
||||
class HoloShaderMaterial extends THREE.ShaderMaterial {
|
||||
constructor(color: [number, number, number]) {
|
||||
super({
|
||||
uniforms: {
|
||||
u_time: { value: 0 },
|
||||
u_resolution: { value: new THREE.Vector2() },
|
||||
u_color: { value: new THREE.Vector3(...color) },
|
||||
},
|
||||
vertexShader: `
|
||||
void main() {
|
||||
gl_Position = vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision mediump float;
|
||||
uniform float u_time;
|
||||
uniform vec2 u_resolution;
|
||||
uniform vec3 u_color;
|
||||
|
||||
void main() {
|
||||
vec2 uv = gl_FragCoord.xy / u_resolution;
|
||||
vec2 pos = uv * 10.0;
|
||||
pos.x += u_time * 0.3;
|
||||
pos.y += sin(u_time * 0.2) * 2.0;
|
||||
|
||||
float color = sin(pos.x + sin(pos.y + sin(pos.x))) * 0.5 + 0.5;
|
||||
|
||||
vec3 c = vec3(
|
||||
u_color.r + 0.2 * sin(u_time + pos.x),
|
||||
u_color.g + 0.2 * cos(u_time + pos.y),
|
||||
u_color.b + 0.2 * sin(pos.x + pos.y + u_time)
|
||||
);
|
||||
|
||||
gl_FragColor = vec4(c * color, 1.0);
|
||||
}
|
||||
`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
extend({ HoloShaderMaterial });
|
||||
|
||||
// 🎥 Plano con el shader
|
||||
function HoloPlane({ color }: { color: [number, number, number] }) {
|
||||
const mat = useRef<any>(null);
|
||||
const { size } = useThree();
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (mat.current) {
|
||||
mat.current.uniforms.u_time.value = clock.getElapsedTime();
|
||||
mat.current.uniforms.u_resolution.value.set(size.width, size.height);
|
||||
}
|
||||
});
|
||||
|
||||
const material = useMemo(() => new HoloShaderMaterial(color), [color]);
|
||||
|
||||
return (
|
||||
<mesh>
|
||||
<planeGeometry args={[2, 2]} />
|
||||
<primitive object={material} ref={mat} attach="material" />
|
||||
</mesh>
|
||||
);
|
||||
}
|
||||
|
||||
// 🎨 Fondo que ocupa todo el contenedor
|
||||
function HolographicBackground({ color }: { color: [number, number, number] }) {
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
zIndex: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
<Canvas orthographic camera={{ zoom: 1, position: [0, 0, 1] }}>
|
||||
<HoloPlane color={color} />
|
||||
</Canvas>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 🧩 Componente final con fondo shader y texto 404
|
||||
export function MantineCardWithShader() {
|
||||
const theme = useMantineTheme();
|
||||
const hex = theme.colors[theme.primaryColor][6];
|
||||
const rgb = hexToRGBArray(hex);
|
||||
|
||||
return (
|
||||
<Card
|
||||
withBorder
|
||||
radius="lg"
|
||||
shadow="xl"
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
minHeight: 300,
|
||||
minWidth: 400,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<HolographicBackground color={rgb} />
|
||||
|
||||
<Box style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
|
||||
<Title
|
||||
order={1}
|
||||
style={{
|
||||
fontSize: '15rem',
|
||||
fontWeight: 900,
|
||||
backgroundImage: 'linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0))',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
textAlign: 'center',
|
||||
lineHeight: 1,
|
||||
userSelect: 'none', // <-- evita selección
|
||||
textDecoration: 'none', // <-- evita subrayado
|
||||
}}
|
||||
>
|
||||
404
|
||||
</Title>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
.navbar {
|
||||
height: 100vh; /* ← Ocupa todo el alto de la ventana */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
|
||||
width: 300px;
|
||||
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
position: sticky; /* ← Opcional, si quieres que se quede "pegado" */
|
||||
top: 0; /* ← Ancla arriba */
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
var(--mantine-font-family);
|
||||
margin-bottom: var(--mantine-spacing-sm);
|
||||
background-color: var(--mantine-color-body);
|
||||
padding: var(--mantine-spacing-xs);
|
||||
padding-top: 15px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Esta es la barra izquierda pequeña donde los iconos */
|
||||
.aside {
|
||||
flex: 0 0 52px;
|
||||
background-color: var(--mantine-color-body);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
||||
}
|
||||
|
||||
.topSection {
|
||||
padding-top: 12px; /* o la cantidad que desees */
|
||||
}
|
||||
|
||||
/* Estos son los iconos */
|
||||
.mainLink {
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: var(--mantine-radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: var(--mantine-color-brand-7);
|
||||
color: var(--mantine-color-brand-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border-top-right-radius: var(--mantine-radius-md);
|
||||
border-bottom-right-radius: var(--mantine-radius-md);
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
padding: 0 var(--mantine-spacing-md);
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
margin-right: var(--mantine-spacing-md);
|
||||
font-weight: 420;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
||||
color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: var(--mantine-color-brand-7);
|
||||
color: var(--mantine-color-brand-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import {
|
||||
AppShell,
|
||||
Burger,
|
||||
Group,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
Title,
|
||||
useMantineTheme,
|
||||
} from '@mantine/core';
|
||||
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { default as LogoIcon } from '../../../assets/icons/favicon';
|
||||
import { mainLinksdata } from '../../../data/navigationsLinks_1';
|
||||
import { submenuLinks } from '../../../data/submenuLinks_1';
|
||||
|
||||
import classes from './Appshell.module.css';
|
||||
|
||||
type AppShellWithMenuProps = {
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
|
||||
// Persistencia en localStorage
|
||||
const STORAGE_KEY = 'lastSubmenuRoutes';
|
||||
|
||||
function getLastSubmenuRoute(section: string): string | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
const parsed = raw ? JSON.parse(raw) : {};
|
||||
return parsed[section] ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function setLastSubmenuRoute(section: string, route: string) {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
const parsed = raw ? JSON.parse(raw) : {};
|
||||
parsed[section] = route;
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(parsed));
|
||||
} catch {
|
||||
// fallback silencioso
|
||||
}
|
||||
}
|
||||
|
||||
export function AppShellWithMenu({ children }: AppShellWithMenuProps) {
|
||||
const theme = useMantineTheme();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
const [mobileOpened, { toggle: toggleMobile, close: closeMobile }] = useDisclosure(false);
|
||||
const [desktopOpened, { toggle: toggleDesktop, open: openDesktop }] = useDisclosure(true);
|
||||
|
||||
const isCollapsed = useMemo(
|
||||
() => (isMobile ? !mobileOpened : !desktopOpened),
|
||||
[isMobile, mobileOpened, desktopOpened]
|
||||
);
|
||||
|
||||
// Estado para el main link activo
|
||||
const [activeMain, setActiveMain] = useState<string>('Home');
|
||||
|
||||
// Ref para saber si el usuario ha hecho clic manualmente en el main link
|
||||
const userClickedMainRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
const currentPath = location.pathname.toLowerCase().replace(/\/$/, '');
|
||||
|
||||
let matchedMain: string | null = null;
|
||||
let maxMatchLength = 0;
|
||||
|
||||
Object.entries(submenuLinks).forEach(([main, items]) => {
|
||||
items.forEach((item) => {
|
||||
const itemPath = item.to.toLowerCase().replace(/\/$/, '');
|
||||
if (
|
||||
currentPath === itemPath ||
|
||||
currentPath.startsWith(itemPath + '/')
|
||||
) {
|
||||
if (itemPath.length > maxMatchLength) {
|
||||
matchedMain = main;
|
||||
maxMatchLength = itemPath.length;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (matchedMain) {
|
||||
setActiveMain(matchedMain);
|
||||
}
|
||||
}, [location.pathname]);
|
||||
|
||||
const activeLink =
|
||||
submenuLinks[activeMain as keyof typeof submenuLinks]?.find(
|
||||
(item) => item.to === location.pathname
|
||||
)?.label ?? '';
|
||||
|
||||
const mainLinks = mainLinksdata.map((link) => (
|
||||
<Tooltip
|
||||
label={link.label}
|
||||
position="right"
|
||||
withArrow
|
||||
transitionProps={{ duration: 0 }}
|
||||
key={link.label}
|
||||
>
|
||||
<UnstyledButton
|
||||
onClick={() => {
|
||||
userClickedMainRef.current = true;
|
||||
setActiveMain(link.label);
|
||||
|
||||
const remembered = getLastSubmenuRoute(link.label);
|
||||
const fallback = submenuLinks[link.label as keyof typeof submenuLinks]?.[0]?.to;
|
||||
|
||||
if (isCollapsed && (remembered || fallback)) {
|
||||
navigate(remembered ?? fallback);
|
||||
}
|
||||
}}
|
||||
className={classes.mainLink}
|
||||
data-active={link.label === activeMain || undefined}
|
||||
>
|
||||
<link.icon />
|
||||
</UnstyledButton>
|
||||
</Tooltip>
|
||||
));
|
||||
|
||||
const links = (submenuLinks[activeMain as keyof typeof submenuLinks] || []).map((item) => (
|
||||
<Link
|
||||
className={classes.link}
|
||||
data-active={activeLink === item.label || undefined}
|
||||
to={item.to}
|
||||
key={item.label}
|
||||
style={{ display: isCollapsed ? 'none' : 'block' }}
|
||||
onClick={() => {
|
||||
setLastSubmenuRoute(activeMain, item.to);
|
||||
if (isMobile) closeMobile();
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
));
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile) openDesktop();
|
||||
}, [isMobile, openDesktop]);
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{
|
||||
width: isCollapsed ? 60 : 300,
|
||||
breakpoint: 'sm',
|
||||
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
{/* Header */}
|
||||
<AppShell.Header>
|
||||
<Group h="100%" px="sm">
|
||||
<Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
|
||||
<Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
|
||||
<LogoIcon
|
||||
style={{ width: 30, height: 30 }}
|
||||
circleFill={theme.colors.brand[9]}
|
||||
pathFill={theme.colors.secondary[2]}
|
||||
/>
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
{/* Navbar */}
|
||||
<AppShell.Navbar>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.aside}>
|
||||
<div className={classes.topSection}>{mainLinks}</div>
|
||||
</div>
|
||||
<div className={classes.main}>
|
||||
{!isCollapsed && (
|
||||
<Title order={4} className={classes.title}>
|
||||
{activeMain}
|
||||
</Title>
|
||||
)}
|
||||
{links}
|
||||
</div>
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
{/* Main Content */}
|
||||
<AppShell.Main>{children}</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Button, Group, useMantineColorScheme } from '@mantine/core';
|
||||
|
||||
export function ColorSchemeToggle() {
|
||||
const { setColorScheme } = useMantineColorScheme();
|
||||
|
||||
return (
|
||||
<Group justify="center" mt="xl">
|
||||
<Button onClick={() => setColorScheme('light')}>Light</Button>
|
||||
<Button onClick={() => setColorScheme('dark')}>Dark</Button>
|
||||
<Button onClick={() => setColorScheme('auto')}>Auto</Button>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { AppShellWithMenu } from './Appshell/Appshell';
|
||||
|
||||
|
||||
export function Plantilla() {
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.title {
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
font-size: rem(100px);
|
||||
font-weight: 900;
|
||||
letter-spacing: rem(-2px);
|
||||
|
||||
@media (max-width: $mantine-breakpoint-md) {
|
||||
font-size: rem(50px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { Welcome } from './Welcome';
|
||||
|
||||
export default {
|
||||
title: 'Welcome',
|
||||
};
|
||||
|
||||
export const Usage = () => <Welcome />;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { render, screen } from '@test-utils';
|
||||
import { Welcome } from './Welcome';
|
||||
|
||||
describe('Welcome component', () => {
|
||||
it('has correct Vite guide link', () => {
|
||||
render(<Welcome />);
|
||||
expect(screen.getByText('this guide')).toHaveAttribute(
|
||||
'href',
|
||||
'https://mantine.dev/guides/vite/'
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Anchor, Text, Title } from '@mantine/core';
|
||||
import classes from './Welcome.module.css';
|
||||
import { useMantineTheme } from '@mantine/core';
|
||||
|
||||
export function Welcome() {
|
||||
|
||||
const theme = useMantineTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title className={classes.title} ta="center" mt={100}>
|
||||
Hola! {' '}
|
||||
<Text inherit variant="gradient" component="span" gradient={{ from: theme.colors.brand[7], to: theme.colors.secondary[4], }} style={{ letterSpacing: '1px' }}>
|
||||
Holooooo
|
||||
</Text>
|
||||
</Title>
|
||||
<Text c="dimmed" ta="left" size="lg" maw={580} mx="auto" mt="xl">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi officia porro natus ullam vero mollitia provident, fuga quidem! Perspiciatis explicabo, vel non illum libero suscipit esse animi a voluptatem!
|
||||
</Text>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { AppShellWithMenu } from '../FitzStudio/Appshell/Appshell';
|
||||
import { Welcome } from '@/frontend_domains/FitzStudio/Welcome/Welcome';
|
||||
import { ColorSchemeToggle } from '@/frontend_domains/FitzStudio/ColorSchemeToggle/ColorSchemeToggle';
|
||||
|
||||
|
||||
export function HomePage() {
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
|
||||
<Welcome />
|
||||
|
||||
<div style={{ padding: '20px' }}>
|
||||
<h1>Welcome to the Home Page</h1>
|
||||
<p>This is the home page content.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<ColorSchemeToggle></ColorSchemeToggle>
|
||||
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { useState } from "react";
|
||||
import { Textarea, Button, Group } from "@mantine/core";
|
||||
|
||||
export function ChatInput({ onSend }: { onSend: (text: string) => void }) {
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const handleSend = () => {
|
||||
if (!text.trim()) return;
|
||||
onSend(text.trim());
|
||||
setText("");
|
||||
};
|
||||
|
||||
return (
|
||||
<Group>
|
||||
<Textarea
|
||||
value={text}
|
||||
onChange={(e) => setText(e.currentTarget.value)}
|
||||
autosize
|
||||
minRows={1}
|
||||
maxRows={4}
|
||||
placeholder="Escribe tu mensaje..."
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Button onClick={handleSend}>Enviar</Button>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { Container, Stack, Paper, ScrollArea, Title } from "@mantine/core";
|
||||
import { ChatInput } from "./ChatInput";
|
||||
import { MessageList } from "./MessageList";
|
||||
import { AppShellWithMenu } from "../../FitzStudio/Appshell/Appshell";
|
||||
|
||||
export function ChatPage() {
|
||||
const [messages, setMessages] = useState([
|
||||
{ sender: "bot", content: "Hola, ¿en qué puedo ayudarte hoy?" },
|
||||
]);
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
|
||||
const handleSend = async (content: string) => {
|
||||
const newMessages = [...messages, { sender: "user", content }];
|
||||
setMessages(newMessages);
|
||||
|
||||
let currentResponse = "";
|
||||
setMessages((prev) => [...prev, { sender: "bot", content: "" }]);
|
||||
|
||||
wsRef.current = new WebSocket("ws://localhost:8000/ws/chat");
|
||||
|
||||
wsRef.current.onopen = () => {
|
||||
wsRef.current?.send(JSON.stringify({ prompt: content }));
|
||||
};
|
||||
|
||||
wsRef.current.onmessage = (event) => {
|
||||
const token = event.data;
|
||||
currentResponse += token;
|
||||
setMessages((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[updated.length - 1] = { sender: "bot", content: currentResponse };
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
wsRef.current.onerror = (err) => {
|
||||
console.error("WebSocket error:", err);
|
||||
setMessages((prev) => [
|
||||
...prev.slice(0, -1),
|
||||
{ sender: "bot", content: "⚠️ Error al comunicarse con el servidor." },
|
||||
]);
|
||||
};
|
||||
|
||||
wsRef.current.onclose = () => {
|
||||
wsRef.current = null;
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<Container size="sm" p="md">
|
||||
<Stack>
|
||||
<Title order={2}>Chat LLM</Title>
|
||||
<Paper shadow="xs" p="md" withBorder>
|
||||
<ScrollArea h={400}>
|
||||
<MessageList messages={messages} />
|
||||
</ScrollArea>
|
||||
</Paper>
|
||||
<ChatInput onSend={handleSend} />
|
||||
</Stack>
|
||||
</Container>
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Paper, Text, useMantineTheme, useMantineColorScheme } from "@mantine/core";
|
||||
|
||||
export function MessageBubble({ sender, content }: { sender: string; content: string }) {
|
||||
const theme = useMantineTheme();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const isUser = sender === "user";
|
||||
|
||||
const userBg = theme.colors[theme.primaryColor][0];
|
||||
const botBg = colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0];
|
||||
const userTextColor = theme.colors[theme.primaryColor][9];
|
||||
|
||||
return (
|
||||
<Paper
|
||||
p="sm"
|
||||
radius="md"
|
||||
withBorder
|
||||
style={{
|
||||
alignSelf: isUser ? "flex-end" : "flex-start",
|
||||
backgroundColor: isUser ? userBg : botBg,
|
||||
maxWidth: "80%",
|
||||
}}
|
||||
>
|
||||
<Text size="sm" c={isUser ? userTextColor : undefined}>
|
||||
{content}
|
||||
</Text>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
import { MessageBubble } from "./MessageBubble";
|
||||
|
||||
export function MessageList({ messages }: { messages: { sender: string; content: string }[] }) {
|
||||
return (
|
||||
<Stack>
|
||||
{messages.map((msg, i) => (
|
||||
<MessageBubble key={i} sender={msg.sender} content={msg.content} />
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
ScrollArea,
|
||||
Group,
|
||||
Button,
|
||||
TextInput,
|
||||
Modal,
|
||||
Box
|
||||
} from '@mantine/core';
|
||||
import { AppShellWithMenu } from '../FitzStudio/Appshell/Appshell';
|
||||
import axios from 'axios';
|
||||
|
||||
import { RichTextEditor } from '@mantine/tiptap';
|
||||
import { useEditor } from '@tiptap/react';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import '@mantine/tiptap/styles.css';
|
||||
|
||||
import TurndownService from 'turndown';
|
||||
import { marked } from 'marked';
|
||||
|
||||
import './Editor_biblioteca.css';
|
||||
|
||||
type Nota = {
|
||||
id: string;
|
||||
titulo: string;
|
||||
texto: string; // Markdown
|
||||
};
|
||||
|
||||
type Biblioteca = {
|
||||
id: string;
|
||||
nombre: string;
|
||||
descripcion: string;
|
||||
notas: Nota[];
|
||||
};
|
||||
|
||||
const turndownService = new TurndownService({
|
||||
headingStyle: 'atx',
|
||||
bulletListMarker: '-',
|
||||
codeBlockStyle: 'fenced',
|
||||
emDelimiter: '*',
|
||||
strongDelimiter: '**',
|
||||
});
|
||||
|
||||
export function Biblioteca() {
|
||||
const [bibliotecas, setBibliotecas] = useState<Biblioteca[]>([]);
|
||||
const [bibliotecaSeleccionada, setBibliotecaSeleccionada] = useState<Biblioteca | null>(null);
|
||||
const [notaSeleccionada, setNotaSeleccionada] = useState<Nota | null>(null);
|
||||
const [modalNuevaBiblio, setModalNuevaBiblio] = useState(false);
|
||||
const [nombreBiblio, setNombreBiblio] = useState('');
|
||||
const [descripcionBiblio, setDescripcionBiblio] = useState('');
|
||||
const [loadingNuevaBiblio, setLoadingNuevaBiblio] = useState(false);
|
||||
|
||||
|
||||
const editor = useEditor({
|
||||
extensions: [StarterKit],
|
||||
content: '',
|
||||
onUpdate: ({ editor }) => {
|
||||
const html = editor.getHTML();
|
||||
const markdown = turndownService.turndown(html);
|
||||
setNotaSeleccionada((prev) =>
|
||||
prev ? { ...prev, texto: markdown } : null
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log('🟡 editor:', editor);
|
||||
console.log('🟠 isDestroyed:', editor?.isDestroyed);
|
||||
console.log('🟢 isEditable:', editor?.isEditable);
|
||||
}, [editor]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchBibliotecas();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor || !notaSeleccionada || editor.isDestroyed) return;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const markdown = notaSeleccionada.texto;
|
||||
const html = await marked.parse(markdown);
|
||||
editor.commands.setContent(html);
|
||||
setTimeout(() => editor.commands.focus(), 100);
|
||||
} catch (err) {
|
||||
console.error('❌ Error al hacer setContent:', err);
|
||||
}
|
||||
})();
|
||||
}, [notaSeleccionada?.id, editor]);
|
||||
|
||||
const fetchBibliotecas = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/v1/text_manager/list');
|
||||
if (!Array.isArray(res.data)) return;
|
||||
|
||||
const bibliotecasConNotas = await Promise.all(
|
||||
res.data.map(async (biblio: Omit<Biblioteca, 'notas'>) => {
|
||||
const notas = await axios.get(`/api/v1/text_manager/nota/list/${biblio.id}`);
|
||||
return { ...biblio, notas: notas.data as Nota[] };
|
||||
})
|
||||
);
|
||||
setBibliotecas(bibliotecasConNotas);
|
||||
setBibliotecaSeleccionada(bibliotecasConNotas[0] || null);
|
||||
} catch (error) {
|
||||
console.error('Error al cargar bibliotecas:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const crearBiblioteca = async () => {
|
||||
setLoadingNuevaBiblio(true);
|
||||
try {
|
||||
await axios.post('/api/v1/text_manager/biblioteca', {
|
||||
nombre_biblioteca: nombreBiblio,
|
||||
descripcion: descripcionBiblio,
|
||||
});
|
||||
setNombreBiblio('');
|
||||
setDescripcionBiblio('');
|
||||
setModalNuevaBiblio(false);
|
||||
await fetchBibliotecas();
|
||||
} catch (error) {
|
||||
console.error('❌ Error al crear biblioteca:', error);
|
||||
} finally {
|
||||
setLoadingNuevaBiblio(false);
|
||||
}
|
||||
};
|
||||
|
||||
const guardarEdicionNota = async () => {
|
||||
if (!notaSeleccionada || !bibliotecaSeleccionada) return;
|
||||
try {
|
||||
await axios.put(`/api/v1/text_manager/nota/${bibliotecaSeleccionada.id}/${notaSeleccionada.id}`, {
|
||||
titulo: notaSeleccionada.titulo,
|
||||
texto: notaSeleccionada.texto,
|
||||
tags: [],
|
||||
conexiones: [],
|
||||
resumen: ""
|
||||
});
|
||||
await fetchBibliotecas();
|
||||
} catch (error) {
|
||||
console.error("Error al actualizar nota:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const eliminarNota = async (notaId: string) => {
|
||||
if (!bibliotecaSeleccionada) return;
|
||||
try {
|
||||
await axios.delete(`/api/v1/text_manager/nota/${bibliotecaSeleccionada.id}/${notaId}`);
|
||||
await fetchBibliotecas();
|
||||
setNotaSeleccionada(null);
|
||||
} catch (error) {
|
||||
console.error("Error al eliminar nota:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<Box display="flex" h="100%" style={{ overflow: 'hidden' }}>
|
||||
<Box w={240} p="md">
|
||||
<ScrollArea h="100%">
|
||||
<Stack gap="md">
|
||||
<Button color="teal" onClick={fetchBibliotecas}>🔄 Recuperar bibliotecas</Button>
|
||||
<Button color="grape" variant="outline" onClick={() => setModalNuevaBiblio(true)}>➕ Nueva biblioteca</Button>
|
||||
{bibliotecas.map((biblio) => (
|
||||
<Button
|
||||
key={biblio.id}
|
||||
size="xs"
|
||||
fullWidth
|
||||
variant={biblio.id === bibliotecaSeleccionada?.id ? 'filled' : 'light'}
|
||||
color="blue"
|
||||
onClick={() => {
|
||||
setBibliotecaSeleccionada(biblio);
|
||||
setNotaSeleccionada(null);
|
||||
}}
|
||||
>
|
||||
{biblio.nombre}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
|
||||
<Box w={240} p="md">
|
||||
<ScrollArea h="100%">
|
||||
<Stack gap="md">
|
||||
<Title order={4}>Notas</Title>
|
||||
<Button
|
||||
color="green"
|
||||
variant="outline"
|
||||
fullWidth
|
||||
onClick={async () => {
|
||||
if (!bibliotecaSeleccionada) return;
|
||||
try {
|
||||
const res = await axios.post(`/api/v1/text_manager/nota/${bibliotecaSeleccionada.id}`, {
|
||||
titulo: 'Nueva nota',
|
||||
texto: '',
|
||||
tags: [],
|
||||
conexiones: [],
|
||||
resumen: ''
|
||||
});
|
||||
const nuevaNota: Nota = res.data;
|
||||
await fetchBibliotecas();
|
||||
setNotaSeleccionada(nuevaNota);
|
||||
} catch (error) {
|
||||
console.error('Error al crear nota:', error);
|
||||
}
|
||||
}}
|
||||
>
|
||||
➕ Nueva nota
|
||||
</Button>
|
||||
{bibliotecaSeleccionada?.notas.map((nota) => (
|
||||
<Button
|
||||
key={nota.id}
|
||||
fullWidth
|
||||
variant={notaSeleccionada?.id === nota.id ? 'filled' : 'light'}
|
||||
color="gray"
|
||||
onClick={() => setNotaSeleccionada(nota)}
|
||||
>
|
||||
{nota.titulo}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
|
||||
<Box p="md" style={{ flex: 1, overflow: 'hidden', minWidth: 0 }}>
|
||||
{notaSeleccionada ? (
|
||||
<Stack gap="sm">
|
||||
<TextInput
|
||||
label="Título"
|
||||
size="lg"
|
||||
styles={{ input: { fontSize: 20, fontWeight: 600 } }}
|
||||
value={notaSeleccionada.titulo}
|
||||
onChange={(e) =>
|
||||
setNotaSeleccionada((prev) => prev ? { ...prev, titulo: e.currentTarget.value } : null)
|
||||
}
|
||||
/>
|
||||
{editor && !editor.isDestroyed && (
|
||||
<RichTextEditor
|
||||
editor={editor}
|
||||
miw={0}
|
||||
style={{ fontSize: 14, minHeight: 200 }}
|
||||
classNames={{ content: 'tiptap' }}
|
||||
>
|
||||
<RichTextEditor.Toolbar sticky stickyOffset={0}>
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Bold />
|
||||
<RichTextEditor.Italic />
|
||||
<RichTextEditor.Strikethrough />
|
||||
<RichTextEditor.ClearFormatting />
|
||||
<RichTextEditor.H1 />
|
||||
<RichTextEditor.H2 />
|
||||
<RichTextEditor.Blockquote />
|
||||
<RichTextEditor.CodeBlock />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
</RichTextEditor.Toolbar>
|
||||
{/* tabIndex removido */}
|
||||
<RichTextEditor.Content className="tiptap" />
|
||||
</RichTextEditor>
|
||||
)}
|
||||
<Group mt="sm">
|
||||
<Button color="blue" onClick={guardarEdicionNota}>💾 Guardar</Button>
|
||||
<Button color="red" onClick={() => eliminarNota(notaSeleccionada.id)}>🗑️ Eliminar</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
) : (
|
||||
<Text>Selecciona una nota para editar</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Modal opened={modalNuevaBiblio} onClose={() => setModalNuevaBiblio(false)} title="Crear nueva biblioteca">
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nombre"
|
||||
value={nombreBiblio}
|
||||
onChange={(e) => setNombreBiblio(e.currentTarget.value)}
|
||||
disabled={loadingNuevaBiblio}
|
||||
/>
|
||||
<TextInput
|
||||
label="Descripción"
|
||||
value={descripcionBiblio}
|
||||
onChange={(e) => setDescripcionBiblio(e.currentTarget.value)}
|
||||
disabled={loadingNuevaBiblio}
|
||||
/>
|
||||
<Button onClick={crearBiblioteca} loading={loadingNuevaBiblio}>Crear</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { RichTextEditor } from '@mantine/tiptap';
|
||||
import { useEditor } from '@tiptap/react';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import '@mantine/tiptap/styles.css';
|
||||
import { AppShellWithMenu } from '../FitzStudio/Appshell/Appshell';
|
||||
|
||||
export default function EditorTest() {
|
||||
const editor = useEditor({
|
||||
extensions: [StarterKit],
|
||||
content: '<p>Prueba aquí. Presiona ENTER o ESPACIO.</p>',
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
<div style={{ padding: 40 }}>
|
||||
{editor && ( <AppShellWithMenu>
|
||||
<RichTextEditor editor={editor}>
|
||||
<RichTextEditor.Toolbar sticky stickyOffset={0}>
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Bold />
|
||||
<RichTextEditor.Italic />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
</RichTextEditor.Toolbar>
|
||||
<RichTextEditor.Content />
|
||||
</RichTextEditor>
|
||||
</AppShellWithMenu>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
/* Editor_biblioteca.css */
|
||||
/* En Editor_biblioteca.css */
|
||||
.tiptap {
|
||||
min-height: 200px;
|
||||
padding: 8px;
|
||||
/* white-space: pre-wrap; */
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tiptap p {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.tiptap h1, .tiptap h2, .tiptap h3 {
|
||||
margin-top: 0.8em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.tiptap blockquote {
|
||||
margin: 0.6em 0;
|
||||
/* padding-left: 1em; */
|
||||
border-left: 3px solid #888;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.mantine-RichTextEditor-toolbar {
|
||||
background-color: #1e1e1e; /* o el color de tu layout */
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.mantine-RichTextEditor-controlIcon {
|
||||
color: white !important;
|
||||
stroke: white !important;
|
||||
}
|
||||
|
||||
.mantine-RichTextEditor-control {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { useState } from 'react';
|
||||
import { TextInput, PasswordInput, Button, Paper, Title, Container, Group, Alert } from '@mantine/core';
|
||||
import UserIcon from '../../assets/icons/outlined/user.svg?react';
|
||||
import LockIcon from '../../assets/icons/outlined/lock.svg?react';
|
||||
|
||||
export function LoginPage() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
// Aquí deberías llamar a tu endpoint de login (ajusta la URL y payload)
|
||||
try {
|
||||
const res = await fetch('/api/v1/usuarios/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password })
|
||||
});
|
||||
if (!res.ok) throw new Error('Credenciales incorrectas');
|
||||
// Aquí puedes guardar el usuario/token en el estado global o localStorage
|
||||
window.location.href = '/';
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container size={420} my={40}>
|
||||
<Title align="center" mb={20}>Iniciar sesión</Title>
|
||||
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<TextInput
|
||||
label="Email"
|
||||
placeholder="tucorreo@ejemplo.com"
|
||||
icon={<UserIcon style={{ width: 18, height: 18 }} />}
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
required
|
||||
mb={10}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Contraseña"
|
||||
placeholder="Tu contraseña"
|
||||
icon={<LockIcon style={{ width: 18, height: 18 }} />}
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
required
|
||||
mb={20}
|
||||
/>
|
||||
{error && <Alert color="red" mb={10}>{error}</Alert>}
|
||||
<Group mt="md">
|
||||
<Button type="submit" loading={loading} fullWidth>
|
||||
Entrar
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user