Version 1.0.0
This commit is contained in:
237
resources/js/pages/article.tsx
Normal file
237
resources/js/pages/article.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { ImageLightbox, SingleImageLightbox } from '@/components/image-lightbox';
|
||||
import AttachmentsList from '@/components/attachments-list';
|
||||
|
||||
const truncateText = (text: string, maxLength: number): string => {
|
||||
if (text.length <= maxLength) return text;
|
||||
return text.slice(0, maxLength) + '…';
|
||||
};
|
||||
|
||||
const getBreadcrumbs = (section: string, slug: string, categorySlug: string | null, categoryTitle: string | null): BreadcrumbItem[] => {
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
}
|
||||
];
|
||||
|
||||
if (categorySlug && categoryTitle) {
|
||||
breadcrumbs.push({
|
||||
title: truncateText(categoryTitle, 35),
|
||||
href: '#',
|
||||
disabled: true
|
||||
});
|
||||
}
|
||||
|
||||
breadcrumbs.push({
|
||||
title: truncateText(section, 35),
|
||||
href: '#',
|
||||
disabled: true
|
||||
});
|
||||
|
||||
return breadcrumbs;
|
||||
};
|
||||
|
||||
interface Photo {
|
||||
id: number;
|
||||
image_name: string;
|
||||
image_desc: string;
|
||||
image_path: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Attachment {
|
||||
id: number;
|
||||
file_name: string;
|
||||
file_path: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Category {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
interface Article {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
thumbnail: string;
|
||||
body: string;
|
||||
additional_body?: string;
|
||||
map_body?: string;
|
||||
active: boolean;
|
||||
type: string;
|
||||
external: number;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
photos: Photo[];
|
||||
attachments: Attachment[];
|
||||
map_photo?: Photo;
|
||||
categories: Category[];
|
||||
}
|
||||
|
||||
interface ArticleApiResponse {
|
||||
articles: Article[];
|
||||
}
|
||||
|
||||
interface ArticlePageProps {
|
||||
slug: string;
|
||||
categorySlug: string | null;
|
||||
}
|
||||
|
||||
export default function ArticlePage(props: ArticlePageProps) {
|
||||
const { slug, categorySlug } = props;
|
||||
const [article, setArticle] = useState<Article | null>(null);
|
||||
const [categoryTitle, setCategoryTitle] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/articles?slug=${encodeURIComponent(slug)}`)
|
||||
.then(response => response.json())
|
||||
.then((data: ArticleApiResponse) => {
|
||||
if (data.articles && data.articles.length > 0) {
|
||||
const fetchedArticle = data.articles[0];
|
||||
setArticle(fetchedArticle);
|
||||
|
||||
if (fetchedArticle.categories && fetchedArticle.categories.length > 0) {
|
||||
const matchingCategory = categorySlug ?
|
||||
fetchedArticle.categories.find(cat => cat.slug === categorySlug) : null;
|
||||
|
||||
if (matchingCategory) {
|
||||
setCategoryTitle(matchingCategory.title);
|
||||
} else if (fetchedArticle.categories.length > 0) {
|
||||
setCategoryTitle(fetchedArticle.categories[0].title);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setArticle(null);
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
setArticle(null);
|
||||
setLoading(false);
|
||||
console.error('Error fetching article:', error);
|
||||
});
|
||||
}, [slug, categorySlug]);
|
||||
|
||||
const sectionName = article?.title || slug.replace(/-/g, ' ');
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={getBreadcrumbs(sectionName, slug, categorySlug, categoryTitle)}>
|
||||
<Head title={`${sectionName ? `${truncateText(sectionName, 35)}` : ''}`}/>
|
||||
<div>
|
||||
<main className={`bg-background ${article?.map_photo ? 'max-w-screen-xl' : 'max-w-screen-lg'} mx-auto px-4 xl:px-0 pt-8 pb-12 min-h-[75vh]`}>
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie zawartości...</div>
|
||||
</div>
|
||||
) : !article ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Nie znaleziono artykułu.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{article.type === 'article-with-map' && article.map_photo ? (
|
||||
<div className="flex flex-col md:flex-row gap-8">
|
||||
<div className="md:w-1/2">
|
||||
<h1 className="text-3xl font-bold mb-6">{article.title}</h1>
|
||||
|
||||
{article.published_at && (
|
||||
<div className="mb-4 text-foreground">
|
||||
Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.body }}></div>
|
||||
|
||||
{article.additional_body && (
|
||||
<div className="mt-6 p-4 bg-muted rounded-lg">
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.additional_body }}></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2 md:sticky md:top-8">
|
||||
<SingleImageLightbox
|
||||
image={{
|
||||
image_path: article.map_photo.image_path,
|
||||
image_desc: article.map_photo.image_desc || 'Mapa lokalizacyjna'
|
||||
}}
|
||||
/>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Kliknij zdjęcie, aby powiększyć
|
||||
</p>
|
||||
|
||||
{article.map_body && (
|
||||
<div className="mt-4 p-4">
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.map_body }}></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-6">{article.title}</h1>
|
||||
|
||||
{article.published_at && (
|
||||
<div className="my-4 text-foreground">
|
||||
Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col-reverse md:flex-row gap-8 items-start">
|
||||
<div className="text-foreground content w-full md:flex-1" dangerouslySetInnerHTML={{ __html: article.body }}></div>
|
||||
{article.thumbnail && (
|
||||
<div className="md:max-w-[300px] md:flex-shrink-0">
|
||||
<SingleImageLightbox
|
||||
image={{
|
||||
image_path: article.thumbnail,
|
||||
image_desc: article.title
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{article.additional_body && (
|
||||
<div className="mt-6 p-4 bg-muted rounded-lg">
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.additional_body }}></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{article.photos && article.photos.length > 0 && (
|
||||
<div className="mt-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">Galeria</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{article.photos.map((photo, index) => (
|
||||
<ImageLightbox
|
||||
key={photo.id}
|
||||
images={article.photos}
|
||||
initialIndex={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AttachmentsList attachments={article.attachments || []} />
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
397
resources/js/pages/contact.tsx
Normal file
397
resources/js/pages/contact.tsx
Normal file
@@ -0,0 +1,397 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Strona główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Kontakt',
|
||||
href: '/kontakt',
|
||||
},
|
||||
];
|
||||
|
||||
interface ContactData {
|
||||
system_email: string;
|
||||
telephone: string;
|
||||
email: string;
|
||||
address: string;
|
||||
fax: string;
|
||||
}
|
||||
|
||||
interface ContactApiResponse {
|
||||
contact: ContactData;
|
||||
}
|
||||
|
||||
export default function Contact() {
|
||||
const [contactData, setContactData] = useState<ContactData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
agreement: false,
|
||||
});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [submitStatus, setSubmitStatus] = useState<{
|
||||
success: boolean;
|
||||
message: string;
|
||||
} | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/contact')
|
||||
.then(response => response.json())
|
||||
.then((data: ContactApiResponse) => {
|
||||
setContactData(data.contact);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching contact data:', error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
|
||||
// Clear error for this field when user starts typing
|
||||
if (errors[name]) {
|
||||
setErrors(prev => {
|
||||
const newErrors = { ...prev };
|
||||
delete newErrors[name];
|
||||
return newErrors;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (checked: boolean) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
agreement: checked,
|
||||
}));
|
||||
|
||||
// Clear error for agreement when user checks it
|
||||
if (errors.agreement) {
|
||||
setErrors(prev => {
|
||||
const newErrors = { ...prev };
|
||||
delete newErrors.agreement;
|
||||
return newErrors;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = 'Imię i nazwisko jest wymagane';
|
||||
}
|
||||
|
||||
if (!formData.email.trim()) {
|
||||
newErrors.email = 'Adres e-mail jest wymagany';
|
||||
} else if (!/^\S+@\S+\.\S+$/.test(formData.email)) {
|
||||
newErrors.email = 'Podaj poprawny adres e-mail';
|
||||
}
|
||||
|
||||
if (!formData.subject.trim()) {
|
||||
newErrors.subject = 'Temat jest wymagany';
|
||||
}
|
||||
|
||||
if (!formData.message.trim()) {
|
||||
newErrors.message = 'Treść wiadomości jest wymagana';
|
||||
}
|
||||
|
||||
if (!formData.agreement) {
|
||||
newErrors.agreement = 'Wymagana jest zgoda na przetwarzanie danych osobowych';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
setSubmitStatus(null);
|
||||
|
||||
try {
|
||||
const csrfToken = document.head?.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
|
||||
|
||||
const response = await fetch('/kontakt/wyslij', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': csrfToken,
|
||||
'Accept': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
setSubmitStatus({
|
||||
success: true,
|
||||
message: data.message || 'Wiadomość została wysłana pomyślnie.'
|
||||
});
|
||||
|
||||
// Resetowanie formularza po udanym wysłaniu
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
agreement: false,
|
||||
});
|
||||
} else {
|
||||
setSubmitStatus({
|
||||
success: false,
|
||||
message: data.message || 'Wystąpił błąd podczas wysyłania wiadomości.'
|
||||
});
|
||||
|
||||
if (data.errors) {
|
||||
setErrors(data.errors);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Błąd wysyłania formularza:', error);
|
||||
setSubmitStatus({
|
||||
success: false,
|
||||
message: 'Wystąpił błąd podczas wysyłania wiadomości. Spróbuj ponownie później.'
|
||||
});
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={breadcrumbs}>
|
||||
<Head title="Kontakt" />
|
||||
<div className="bg-background">
|
||||
<main className="max-w-screen-xl mx-auto px-4 xl:px-0 py-8">
|
||||
<h1 className="text-3xl font-bold mb-6">Kontakt</h1>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Dane kontaktowe</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{loading ? (
|
||||
<div className="animate-pulse space-y-3">
|
||||
<div className="h-4 bg-muted rounded w-3/4"></div>
|
||||
<div className="h-4 bg-muted rounded w-1/2"></div>
|
||||
<div className="h-4 bg-muted rounded w-2/3"></div>
|
||||
<div className="h-4 bg-muted rounded w-3/5"></div>
|
||||
<div className="h-4 bg-muted rounded w-1/3"></div>
|
||||
</div>
|
||||
) : contactData ? (
|
||||
<>
|
||||
<div>
|
||||
<h3 className="font-medium text-muted-foreground">Adres:</h3>
|
||||
<p className="mt-1" dangerouslySetInnerHTML={{ __html: contactData.address }}></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-muted-foreground">Telefon:</h3>
|
||||
<p className="mt-1">{contactData.telephone}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-muted-foreground">Fax:</h3>
|
||||
<p className="mt-1">{contactData.fax}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-muted-foreground">E-mail:</h3>
|
||||
<p className="mt-1">
|
||||
<a
|
||||
href={`mailto:${contactData.email}`}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
{contactData.email}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p>Nie udało się załadować danych kontaktowych.</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="mt-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Mapa</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="aspect-video rounded-md overflow-hidden">
|
||||
<iframe
|
||||
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2420.3711291827294!2d16.8160558!3d52.6532738!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47046cc587759f69%3A0xe9da2228ba6bf067!2sSamodzielny%20Publiczny%20Zak%C5%82ad%20Opieki%20Zdrowotnej%20w%20Obornikach!5e0!3m2!1spl!2spl!4v1745879921955!5m2!1spl!2spl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Formularz kontaktowy</CardTitle>
|
||||
<CardDescription>Skontaktuj się z nami</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{submitStatus && (
|
||||
<Alert className={`mb-6 ${submitStatus.success ? 'bg-green-50 text-green-800 border-green-200 contrast:bg-black contrast:border-green-700' : 'bg-red-50 dark:bg-red-200 contrast:bg-black contrast:border-red-700 text-red-800 border-red-200'}`}>
|
||||
<AlertTitle className='contrast:text-foreground'>{submitStatus.success ? 'Sukces!' : 'Błąd!'}</AlertTitle>
|
||||
<AlertDescription className="dark:text-black">{submitStatus.message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Imię i nazwisko *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
autoComplete='off'
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className={errors.name ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-sm text-red-500">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Adres e-mail *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
autoComplete='off'
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className={errors.email ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="text-sm text-red-500">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Telefon</Label>
|
||||
<Input
|
||||
autoComplete='off'
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="subject">Temat *</Label>
|
||||
<Input
|
||||
autoComplete='off'
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
className={errors.subject ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.subject && (
|
||||
<p className="text-sm text-red-500">{errors.subject}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="message">Treść wiadomości *</Label>
|
||||
<Textarea
|
||||
autoComplete='off'
|
||||
id="message"
|
||||
name="message"
|
||||
rows={5}
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className={cn('dark:bg-transparent', errors.message ? 'border-red-500' : '')}
|
||||
/>
|
||||
{errors.message && (
|
||||
<p className="text-sm text-red-500">{errors.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-2">
|
||||
<Checkbox
|
||||
id="agreement"
|
||||
checked={formData.agreement}
|
||||
onCheckedChange={handleCheckboxChange}
|
||||
className={`mt-1 ${errors.agreement ? 'border-red-500' : ''}`}
|
||||
/>
|
||||
<div className="grid gap-1.5 leading-none">
|
||||
<Label
|
||||
htmlFor="agreement"
|
||||
className="text-sm font-normal"
|
||||
>
|
||||
Wyrażam zgodę na przetwarzanie moich danych osobowych podanych w powyższym formularzu. *
|
||||
</Label>
|
||||
{errors.agreement && (
|
||||
<p className="text-sm text-red-500">{errors.agreement}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{submitting ? 'Wysyłanie...' : 'Wyślij wiadomość'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
282
resources/js/pages/diets.tsx
Normal file
282
resources/js/pages/diets.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Pagination } from '@/components/pagination';
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Calendar, FileText, Download } from 'lucide-react';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { SingleImageLightbox } from '@/components/image-lightbox';
|
||||
|
||||
const globalStyles = `
|
||||
.diet-photo-container img {
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
`;
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
|
||||
interface Diet {
|
||||
id: number;
|
||||
name: string;
|
||||
breakfast_photo: string | null;
|
||||
lunch_photo: string | null;
|
||||
breakfast_body: string | null;
|
||||
lunch_body: string | null;
|
||||
diet_attachment: string | null;
|
||||
published_at: string;
|
||||
}
|
||||
|
||||
interface PaginationData {
|
||||
current_page: number;
|
||||
last_page: number;
|
||||
per_page: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
interface DietsData {
|
||||
diets: Diet[];
|
||||
pagination: PaginationData;
|
||||
}
|
||||
|
||||
interface DietsProps {
|
||||
page?: string | number;
|
||||
}
|
||||
|
||||
const getBreadcrumbs = (): BreadcrumbItem[] => [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Pilotaż "Dobry posiłek"',
|
||||
href: '/diety',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Diets({ page = 1 }: DietsProps) {
|
||||
const [dietsData, setDietsData] = useState<DietsData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(typeof page === 'string' ? parseInt(page) : page);
|
||||
|
||||
const fetchDiets = (page: number) => {
|
||||
setLoading(true);
|
||||
fetch(`/api/diets?page=${page}&per_page=7`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setDietsData(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Błąd podczas pobierania diet:', error);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDiets(currentPage);
|
||||
}, [currentPage]);
|
||||
|
||||
useEffect(() => {
|
||||
const initialPage = typeof page === 'string' ? parseInt(page) : page;
|
||||
if (initialPage !== currentPage) {
|
||||
setCurrentPage(initialPage);
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
if (page === 1) {
|
||||
window.history.pushState({}, '', '/diety');
|
||||
} else {
|
||||
window.history.pushState({}, '', `/diety?strona=${page}`);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('pl-PL', { day: 'numeric', month: 'long', year: 'numeric' });
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={getBreadcrumbs()}>
|
||||
<style dangerouslySetInnerHTML={{ __html: globalStyles }} />
|
||||
<Head title='Pilotaż "Dobry posiłek"' />
|
||||
|
||||
<div className="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<h1 className="text-3xl font-bold mb-6">Pilotaż "Dobry posiłek"</h1>
|
||||
|
||||
<div className="mb-8 p-6 rounded-lg">
|
||||
<p className="mb-4">
|
||||
Samodzielny Publiczny Zakład Opieki Zdrowotnej w Obornikach dołączył do programu pilotażowego „Dobry posiłek w szpitalu", który ma celu poprawę żywienia w szpitalach poprzez zwiększenie dostępności porad żywieniowych oraz wdrożenie optymalnego modelu żywienia Pacjentów. <a href="https://isap.sejm.gov.pl/isap.nsf/DocDetails.xsp?id=WDU20230002021" target="_blank" className="text-primary hover:underline">Kliknij tutaj aby przejść do Rozporządzenia Ministra Zdrowia z dnia 25 września 2023 r. w sprawie programu pilotażowego w zakresie edukacji żywieniowej oraz poprawy jakości żywienia w szpitalach – „Dobry posiłek w szpitalu"</a>
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
|
||||
<div className='content'>
|
||||
<h3 className="font-semibold mb-2">Godziny wydawania posiłków:</h3>
|
||||
<ul className="list-disc pl-5 space-y-1">
|
||||
<li>Śniadanie 8:00 - 9:00</li>
|
||||
<li>Obiad 13:00 - 14:00</li>
|
||||
<li>Kolacja 18:00 - 19:00</li>
|
||||
<li>II Kolacja / posiłek nocny 19:00 - 20:00</li>
|
||||
<li>Podwieczorek 14:30 - 15:00</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='content'>
|
||||
<h3 className="font-semibold mb-2">Najczęściej stosowane diety:</h3>
|
||||
<ul className="list-disc pl-5 space-y-1">
|
||||
<li>dieta podstawowa</li>
|
||||
<li>dieta łatwostrawna</li>
|
||||
<li>dieta z ograniczeniem łatwo przyswajalnych węglowodanów (cukrzycowa)</li>
|
||||
<li>dieta papkowata</li>
|
||||
<li>dieta bogatobiałkowa</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">
|
||||
Stosujemy również inne diety, lub ich modyfikacje w zależności od zaleceń lekarza.
|
||||
W ramach programu, na zlecenie lekarza odbywają się również konsultacje dietetyczne.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="space-y-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Card key={i} className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<Skeleton className="h-8 w-3/4" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Skeleton className="h-64 w-full" />
|
||||
<Skeleton className="h-40 w-full mt-4" />
|
||||
</div>
|
||||
<div>
|
||||
<Skeleton className="h-64 w-full" />
|
||||
<Skeleton className="h-40 w-full mt-4" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Skeleton className="h-10 w-48" />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{dietsData?.diets && dietsData.diets.length > 0 ? (
|
||||
<div className="space-y-8">
|
||||
{dietsData.diets.map((diet: Diet) => (
|
||||
<Card key={diet.id} className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">{diet.name}</CardTitle>
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<Calendar className="w-4 h-4 mr-1 dark:text-primary contrast:text-foreground" />
|
||||
<span className="dark:text-primary contrast:text-foreground">{formatDate(diet.published_at)}</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-3">Śniadanie</h3>
|
||||
|
||||
{diet.breakfast_photo && (
|
||||
<div className="mb-4">
|
||||
<div className="h-64 overflow-hidden rounded-lg shadow-md diet-photo-container">
|
||||
{diet.breakfast_photo && (
|
||||
<div className="h-full">
|
||||
<SingleImageLightbox
|
||||
image={{
|
||||
image_path: diet.breakfast_photo,
|
||||
image_desc: "Śniadanie: " + diet.name
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{diet.breakfast_body && (
|
||||
<div
|
||||
className="text-sm text-gray-700 mt-3 content text-black dark:text-white contrast:text-foreground"
|
||||
dangerouslySetInnerHTML={{ __html: diet.breakfast_body }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-3">Obiad</h3>
|
||||
|
||||
{diet.lunch_photo && (
|
||||
<div className="mb-4">
|
||||
<div className="h-64 overflow-hidden rounded-lg shadow-md diet-photo-container">
|
||||
{diet.lunch_photo && (
|
||||
<div className="h-full">
|
||||
<SingleImageLightbox
|
||||
image={{
|
||||
image_path: diet.lunch_photo,
|
||||
image_desc: "Obiad: " + diet.name
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{diet.lunch_body && (
|
||||
<div
|
||||
className="text-sm text-gray-700 mt-3 content text-black dark:text-white contrast:text-foreground"
|
||||
dangerouslySetInnerHTML={{ __html: diet.lunch_body }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
{diet.diet_attachment && (
|
||||
<a
|
||||
href={diet.diet_attachment}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex"
|
||||
>
|
||||
<Button variant="outline" className="flex items-center">
|
||||
<FileText className="w-4 h-4 mr-2" />
|
||||
<span className="mr-2">Pobierz jadłospis</span>
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
</a>
|
||||
)}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{dietsData.pagination && dietsData.pagination.last_page > 1 && (
|
||||
<Pagination
|
||||
currentPage={dietsData.pagination.current_page}
|
||||
lastPage={dietsData.pagination.last_page}
|
||||
onPageChange={handlePageChange}
|
||||
className="my-8"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-50 rounded-lg p-8 text-center">
|
||||
<p className="text-gray-600">Brak dostępnych diet do wyświetlenia.</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
136
resources/js/pages/employees.tsx
Normal file
136
resources/js/pages/employees.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Phone, Mail } from 'lucide-react';
|
||||
import { Link } from '@inertiajs/react';
|
||||
|
||||
const getBreadcrumbs = (section: string, slug: string): BreadcrumbItem[] => [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: section || slug.replace(/-/g, ' '),
|
||||
href: `/administracja/${slug}`,
|
||||
},
|
||||
];
|
||||
|
||||
interface Employee {
|
||||
name: string;
|
||||
slug?: string;
|
||||
sort_order?: number;
|
||||
employees: Array<{
|
||||
type: string;
|
||||
data: {
|
||||
[key: string]: string | null;
|
||||
};
|
||||
}>;
|
||||
}
|
||||
|
||||
interface EmployeesApiResponse {
|
||||
main: Record<string, Employee>;
|
||||
extra: Record<string, Employee>;
|
||||
}
|
||||
|
||||
interface EmployeesPageProps {
|
||||
slug: string;
|
||||
}
|
||||
|
||||
export default function Employees(props: EmployeesPageProps) {
|
||||
const { slug } = props;
|
||||
const [employees, setEmployees] = useState<EmployeesApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/employees?slug=${encodeURIComponent(slug)}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setEmployees(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
setEmployees(null);
|
||||
setLoading(false);
|
||||
console.error('Error fetching employees:', error);
|
||||
});
|
||||
}, [slug]);
|
||||
|
||||
const mainSections = employees?.main ? Object.values(employees.main) : [];
|
||||
const extraSections = employees?.extra ? Object.values(employees.extra) : [];
|
||||
const sectionName = mainSections.length > 0 ? mainSections[0].name : '';
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={getBreadcrumbs(sectionName, '')}>
|
||||
<Head title={`${sectionName ? `${sectionName}` : ''}`}/>
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-lg mx-auto px-4 xl:px-0 pt-8 pb-12 min-h-[75vh]">
|
||||
<h1 className="text-3xl font-bold mb-6">{sectionName}</h1>
|
||||
{loading ? (
|
||||
<div>Pobieranie listy pracowników...</div>
|
||||
) : !employees || (mainSections.length === 0 && extraSections.length === 0) ? (
|
||||
<>
|
||||
<div>Sekcja nie istnieje lub brak pracowników w tej sekcji.</div>
|
||||
<Link className='text-primary font-bold hover:underline' href={route("home")}>Powrót na stronę główną</Link>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{mainSections
|
||||
.sort((a: any, b: any) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
|
||||
.map((section: any, index: number) => (
|
||||
<div key={index} className="mb-10">
|
||||
<ul className="flex flex-col gap-4">
|
||||
{section.employees.map((person: any, idx: number) => (
|
||||
<li key={idx} className="bg-page-card dark:bg-page-card shadow-md rounded-lg p-4 flex items-center gap-4 w-full contrast:border contrast:border-foreground/60">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-white dark:text-black contrast:text-black flex items-center justify-center text-xl font-bold uppercase">
|
||||
{person.data.first_name?.[0] || ''}{person.data.last_name?.[0] || ''}
|
||||
</div>
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<div className="font-semibold text-lg text-black dark:text-gray-300 contrast:text-foreground truncate">{person.data.title ? person.data.title + ' ' : ''}{person.data.first_name} {person.data.last_name}</div>
|
||||
{person.data.position && <div className="text-sm text-foreground truncate">{person.data.position}</div>}
|
||||
<div className="flex flex-wrap gap-4 mt-1">
|
||||
{person.data.email && <div className="flex items-center gap-2 text-sm text-foreground font-semibold contrast:text-foreground"><Mail className="h-4 w-4" /> {person.data.email}</div>}
|
||||
{person.data.phone && <div className="flex items-center gap-2 text-sm text-foreground font-semibold contrast:text-foreground"><Phone className="h-4 w-4" /> {person.data.phone}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
{extraSections.length > 0 && (
|
||||
<div className="mt-16">
|
||||
{extraSections
|
||||
.sort((a: any, b: any) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
|
||||
.map((section: any) => (
|
||||
<div key={section.name} className="mb-10">
|
||||
<h2 className="text-xl font-semibold mb-4">{section.name}</h2>
|
||||
<ul className="flex flex-col gap-4">
|
||||
{section.employees.map((person: any, idx: number) => (
|
||||
<li key={idx} className="bg-page-card dark:bg-page-card shadow-md rounded-lg p-4 flex items-center gap-4 w-full contrast:border contrast:border-foreground/60">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-white dark:text-black contrast:text-black flex items-center justify-center text-xl font-bold uppercase">
|
||||
{person.data.first_name?.[0] || ''}{person.data.last_name?.[0] || ''}
|
||||
</div>
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<div className="font-semibold text-lg text-black dark:text-gray-300 contrast:text-foreground truncate">{person.data.title ? person.data.title + ' ' : ''}{person.data.first_name} {person.data.last_name}</div>
|
||||
{person.data.position && <div className="text-sm text-foreground truncate">{person.data.position}</div>}
|
||||
<div className="flex flex-wrap gap-4 mt-1">
|
||||
{person.data.email && <div className="flex items-center gap-2 text-sm text-foreground font-semibold contrast:text-foreground"><Mail className="h-4 w-4" /> {person.data.email}</div>}
|
||||
{person.data.phone && <div className="flex items-center gap-2 text-sm text-foreground font-semibold contrast:text-foreground"><Phone className="h-4 w-4" /> {person.data.phone}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
64
resources/js/pages/home.tsx
Normal file
64
resources/js/pages/home.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import HomeCarousel from '@/components/home-carousel/home-carousel';
|
||||
|
||||
interface HomepageData {
|
||||
title?: string;
|
||||
content?: string;
|
||||
photo?: string;
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const [homepageData, setHomepageData] = useState<HomepageData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch('/api/homepage')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setHomepageData(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching homepage data:', error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<Head title="Strona główna" />
|
||||
<HomeCarousel />
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-xl mx-auto px-4 xl:px-0 pb-12">
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie...</div>
|
||||
</div>
|
||||
) : (
|
||||
<article>
|
||||
<div className="flex flex-col md:flex-row gap-8">
|
||||
<div className="md:w-1/2">
|
||||
<h1 className="text-3xl font-bold text-black dark:text-white contrast:text-foreground mb-6">{homepageData?.title}</h1>
|
||||
<div className="text-lg content" dangerouslySetInnerHTML={{ __html: homepageData?.content || '' }}></div>
|
||||
</div>
|
||||
|
||||
{homepageData?.photo && (
|
||||
<div className="md:w-1/2 md:sticky md:top-8">
|
||||
<img
|
||||
className="w-full rounded-lg shadow-md"
|
||||
src={homepageData.photo}
|
||||
alt="Zdjęcie przedstawiające szpital"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
114
resources/js/pages/joboffers.tsx
Normal file
114
resources/js/pages/joboffers.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { Head, Link } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import AttachmentsList from '@/components/attachments-list';
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Oferty pracy',
|
||||
href: '/oferty-pracy',
|
||||
},
|
||||
];
|
||||
|
||||
interface Attachment {
|
||||
id: number;
|
||||
file_name: string;
|
||||
file_path: string;
|
||||
file_size: number;
|
||||
file_type: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Photo {
|
||||
id: number;
|
||||
image_name: string;
|
||||
image_path: string;
|
||||
image_size: number;
|
||||
image_type: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface JobOffer {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
thumbnail: string;
|
||||
body: string;
|
||||
active: boolean;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
attachments?: Attachment[];
|
||||
photos?: Photo[];
|
||||
}
|
||||
|
||||
interface JobOffersApiResponse {
|
||||
jobOffers: JobOffer[];
|
||||
}
|
||||
|
||||
export default function JobOffers() {
|
||||
const [jobOffers, setJobOffers] = useState<JobOffersApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/joboffers`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setJobOffers(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
setJobOffers(null);
|
||||
setLoading(false);
|
||||
console.error('Error fetching job offers data:', error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={breadcrumbs}>
|
||||
<Head title="Oferty pracy"/>
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-lg mx-auto px-4 xl:px-0 pt-8 pb-12">
|
||||
<h1 className="text-3xl font-bold mb-6">Oferty pracy</h1>
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie...</div>
|
||||
</div>
|
||||
) : !jobOffers || jobOffers.jobOffers.length === 0 ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Brak ofert pracy.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="space-y-8 mb-8">
|
||||
{jobOffers.jobOffers.map((jobOffer) => {
|
||||
return (
|
||||
<div key={jobOffer.id} className="p-6 bg-card rounded-lg shadow-sm">
|
||||
<h2 className="text-2xl font-bold mb-2">{jobOffer.title}</h2>
|
||||
<div className="mb-2 text-muted-foreground">Data publikacji: {new Date(jobOffer.published_at).toLocaleDateString('pl-PL')}</div>
|
||||
<div className="text-foreground mb-4 content" dangerouslySetInnerHTML={{ __html: jobOffer.body }}></div>
|
||||
|
||||
<AttachmentsList
|
||||
attachments={jobOffer.attachments || []}
|
||||
title="Załączniki"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
163
resources/js/pages/news/news-details.tsx
Normal file
163
resources/js/pages/news/news-details.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Phone, Mail } from 'lucide-react';
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { SingleImageLightbox, ImageLightbox } from '@/components/image-lightbox';
|
||||
import AttachmentsList from '@/components/attachments-list';
|
||||
|
||||
const truncateText = (text: string, maxLength: number): string => {
|
||||
if (text.length <= maxLength) return text;
|
||||
return text.slice(0, maxLength) + '…';
|
||||
};
|
||||
|
||||
const getBreadcrumbs = (section: string, slug: string): BreadcrumbItem[] => [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Aktualności',
|
||||
href: '/aktualnosci',
|
||||
},
|
||||
{
|
||||
title: truncateText(section, 35),
|
||||
href: `/aktualnosci/${slug}`,
|
||||
},
|
||||
];
|
||||
|
||||
interface Photo {
|
||||
id: number;
|
||||
image_name: string;
|
||||
image_desc: string;
|
||||
image_path: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Attachment {
|
||||
id: number;
|
||||
file_name: string;
|
||||
file_path: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface News {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
thumbnail: string;
|
||||
body: string;
|
||||
active: boolean;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
photos?: Photo[];
|
||||
attachments?: Attachment[];
|
||||
}
|
||||
|
||||
interface NewsApiResponse {
|
||||
articleNews: Record<string, News>;
|
||||
}
|
||||
|
||||
interface NewsPageProps {
|
||||
slug: string;
|
||||
}
|
||||
|
||||
export default function NewsSlug(props: NewsPageProps) {
|
||||
const { slug } = props;
|
||||
const [news, setNews] = useState<NewsApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/news?slug=${encodeURIComponent(slug)}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setNews(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
setNews(null);
|
||||
setLoading(false);
|
||||
console.error('Error fetching news:', error);
|
||||
});
|
||||
}, [slug]);
|
||||
|
||||
const sectionName = news && Object.values(news.articleNews)[0]?.title || slug.replace(/-/g, ' ');
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={getBreadcrumbs(sectionName, slug)}>
|
||||
<Head title={`${sectionName ? `${truncateText(sectionName, 35)}` : ''}`}/>
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-lg mx-auto px-4 xl:px-0 pt-8 pb-12 min-h-[75vh]">
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie zawartości...</div>
|
||||
</div>
|
||||
) : !news || Object.keys(news.articleNews).length === 0 ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Brak artykułów.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{Object.values(news.articleNews).map((article) => (
|
||||
<div key={article.id} className="mb-8">
|
||||
{article.thumbnail ? (
|
||||
<div className="flex flex-col md:flex-row gap-8">
|
||||
<div className="md:w-1/2">
|
||||
<h1 className="text-3xl font-bold mb-4">{article.title}</h1>
|
||||
|
||||
<div className="mb-4 text-foreground">Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}</div>
|
||||
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.body }}></div>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2 md:sticky md:top-8">
|
||||
<SingleImageLightbox image={{ image_path: article.thumbnail, image_desc: article.title }} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4">{article.title}</h1>
|
||||
|
||||
<div className="mb-4 text-foreground">Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}</div>
|
||||
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.body }}></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{article.photos && article.photos.length > 0 && (
|
||||
<div className={`mt-8 ${!article.thumbnail ? 'max-w-4xl mx-auto' : ''}`}>
|
||||
<h2 className={`text-2xl font-semibold mb-4 ${!article.thumbnail ? 'text-center' : ''}`}>Galeria</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{article.photos.map((photo, index) => (
|
||||
<ImageLightbox
|
||||
key={photo.id}
|
||||
images={article.photos as Array<{
|
||||
id: number;
|
||||
image_path: string;
|
||||
image_desc?: string;
|
||||
}>}
|
||||
initialIndex={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-3xl mx-auto mt-8">
|
||||
<AttachmentsList attachments={article.attachments || []} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
149
resources/js/pages/news/news.tsx
Normal file
149
resources/js/pages/news/news.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import { Head, Link } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Pagination } from '@/components/pagination';
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Aktualności',
|
||||
href: '/aktualnosci',
|
||||
},
|
||||
];
|
||||
|
||||
interface News {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
thumbnail: string;
|
||||
body: string;
|
||||
active: boolean;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
}
|
||||
|
||||
interface PaginationData {
|
||||
total: number;
|
||||
per_page: number;
|
||||
current_page: number;
|
||||
last_page: number;
|
||||
}
|
||||
|
||||
interface NewsApiResponse {
|
||||
articleNews: Record<string, News>;
|
||||
pagination: PaginationData;
|
||||
}
|
||||
|
||||
interface NewsProps {
|
||||
page?: string | number;
|
||||
}
|
||||
|
||||
export default function News({ page = 1 }: NewsProps) {
|
||||
const [news, setNews] = useState<NewsApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(typeof page === 'string' ? parseInt(page) : page);
|
||||
|
||||
useEffect(() => {
|
||||
const initialPage = typeof page === 'string' ? parseInt(page) : page;
|
||||
if (initialPage !== currentPage) {
|
||||
setCurrentPage(initialPage);
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/news?page=${currentPage}&per_page=10`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setNews(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
setNews(null);
|
||||
setLoading(false);
|
||||
console.error('Error fetching news data:', error);
|
||||
});
|
||||
}, [currentPage]);
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={breadcrumbs}>
|
||||
<Head title="Aktualności"/>
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-xl mx-auto px-4 xl:px-0 pt-8 pb-12">
|
||||
<h1 className="text-3xl font-bold mb-6">Aktualności</h1>
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie...</div>
|
||||
</div>
|
||||
) : !news || Object.keys(news.articleNews).length === 0 ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Brak artykułów.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="space-y-8 mb-8">
|
||||
{Object.values(news.articleNews).map((article) => {
|
||||
function stripHtml(html: string) {
|
||||
const htmlWithSpaces = html
|
||||
.replace(/<br\s*\/?>/gi, ' ')
|
||||
.replace(/<\/p><p>/gi, ' ')
|
||||
.replace(/<\/div><div>/gi, ' ')
|
||||
.replace(/<\/h[1-6]><h[1-6]>/gi, ' ')
|
||||
.replace(/<\/li><li>/gi, ' ');
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = htmlWithSpaces;
|
||||
|
||||
return (div.textContent || div.innerText || '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
const plainText = stripHtml(article.body);
|
||||
const shortText = plainText.length > 200
|
||||
? plainText.slice(0, 200).replace(/\s+$/, '') + '…'
|
||||
: plainText;
|
||||
return (
|
||||
<div key={article.id} className="p-6 bg-card rounded-lg shadow-sm">
|
||||
<h2 className="text-2xl font-bold mb-2">{article.title}</h2>
|
||||
<div className="mb-2 text-muted-foreground">Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}</div>
|
||||
<div className="text-foreground mb-4">{shortText}</div>
|
||||
<a
|
||||
href={`/aktualnosci/${article.slug}`}
|
||||
className="inline-block text-primary dark:text-accent hover:underline font-semibold contrast:font-bold"
|
||||
>
|
||||
Czytaj więcej
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{news.pagination && news.pagination.total > 10 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
lastPage={news.pagination.last_page}
|
||||
onPageChange={(page) => {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
if (page === 1) {
|
||||
window.history.pushState({}, '', '/aktualnosci');
|
||||
} else {
|
||||
window.history.pushState({}, '', `/aktualnosci?strona=${page}`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
132
resources/js/pages/price.tsx
Normal file
132
resources/js/pages/price.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Download } from 'lucide-react';
|
||||
|
||||
const getBreadcrumbs = (categoryTitle: string | null): BreadcrumbItem[] => {
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
}
|
||||
];
|
||||
|
||||
if (categoryTitle) {
|
||||
breadcrumbs.push({
|
||||
title: categoryTitle,
|
||||
href: '#',
|
||||
disabled: true
|
||||
});
|
||||
}
|
||||
|
||||
breadcrumbs.push({
|
||||
title: 'Cennik badań diagnostycznych',
|
||||
href: '/cennik-badan',
|
||||
});
|
||||
|
||||
return breadcrumbs;
|
||||
};
|
||||
|
||||
interface PriceData {
|
||||
id: number;
|
||||
attachment_id: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface AttachmentData {
|
||||
id: number;
|
||||
file_name: string;
|
||||
file_path: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
|
||||
|
||||
interface PriceApiResponse {
|
||||
price: PriceData;
|
||||
attachment: AttachmentData;
|
||||
category: string;
|
||||
}
|
||||
|
||||
export default function Price() {
|
||||
const [priceData, setPriceData] = useState<PriceApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [categoryTitle, setCategoryTitle] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch('/api/price')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setPriceData(data);
|
||||
if (data.category) {
|
||||
setCategoryTitle(data.category);
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching price data:', error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDownload = () => {
|
||||
if (priceData?.attachment?.file_path) {
|
||||
const link = document.createElement('a');
|
||||
link.href = priceData.attachment.file_path;
|
||||
link.download = priceData.attachment.file_name || 'cennik.pdf';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={getBreadcrumbs(categoryTitle)}>
|
||||
<Head title="Cennik badań diagnostycznych" />
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-lg mx-auto px-4 xl:px-0 pt-8 pb-12">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold">Cennik badań diagnostycznych</h1>
|
||||
{priceData?.attachment && (
|
||||
<Button
|
||||
onClick={handleDownload}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Pobierz PDF
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie...</div>
|
||||
</div>
|
||||
) : !priceData?.attachment ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Cennik nie jest obecnie dostępny.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<object
|
||||
data={priceData.attachment.file_path}
|
||||
type="application/pdf"
|
||||
className="w-full h-[800px]"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center p-8 text-center">
|
||||
<p className="mb-4">Twoja przeglądarka nie obsługuje bezpośredniego wyświetlania plików PDF.</p>
|
||||
<Button onClick={handleDownload}>Pobierz PDF</Button>
|
||||
</div>
|
||||
</object>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
190
resources/js/pages/projects/project-details.tsx
Normal file
190
resources/js/pages/projects/project-details.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { Head, Link } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import axios from 'axios';
|
||||
import { SingleImageLightbox, ImageLightbox } from '@/components/image-lightbox';
|
||||
import AttachmentsList from '@/components/attachments-list';
|
||||
|
||||
interface Photo {
|
||||
id: number;
|
||||
image_name: string;
|
||||
image_path: string;
|
||||
image_size: number;
|
||||
image_type: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Attachment {
|
||||
id: number;
|
||||
file_name: string;
|
||||
file_path: string;
|
||||
file_size: number;
|
||||
file_type: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface ProjectType {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
body: string;
|
||||
logo: string;
|
||||
active: boolean;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
projectTypes: ProjectType[];
|
||||
photos?: Photo[];
|
||||
attachments?: Attachment[];
|
||||
}
|
||||
|
||||
interface ProjectApiResponse {
|
||||
project: Project;
|
||||
projectType: ProjectType;
|
||||
}
|
||||
|
||||
interface ProjectDetailsProps {
|
||||
typeSlug: string;
|
||||
projectSlug: string;
|
||||
}
|
||||
|
||||
export default function ProjectDetails({ typeSlug, projectSlug }: ProjectDetailsProps) {
|
||||
const [projectData, setProjectData] = useState<ProjectApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/projects/${encodeURIComponent(typeSlug)}/${encodeURIComponent(projectSlug)}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setProjectData(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching project details:', error);
|
||||
setProjectData(null);
|
||||
setLoading(false);
|
||||
});
|
||||
}, [typeSlug, projectSlug]);
|
||||
|
||||
const truncateText = (text: string, maxLength: number): string => {
|
||||
if (text.length <= maxLength) return text;
|
||||
return text.slice(0, maxLength) + '…';
|
||||
};
|
||||
|
||||
const getBreadcrumbs = (): BreadcrumbItem[] => [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Projekty',
|
||||
href: '#',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
title: projectData?.projectType?.title || typeSlug.replace(/-/g, ' '),
|
||||
href: `/projekty/${typeSlug}`,
|
||||
},
|
||||
{
|
||||
title: truncateText(projectData?.project?.title || projectSlug.replace(/-/g, ' '), 35),
|
||||
href: `/projekty/${typeSlug}/${projectSlug}`,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={getBreadcrumbs()}>
|
||||
<Head title={`${truncateText(projectData?.project?.title || 'Projekt', 35)}`} />
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-lg mx-auto px-4 xl:px-0 pt-8 pb-12 min-h-[75vh]">
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie zawartości...</div>
|
||||
</div>
|
||||
) : !projectData || !projectData.project ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Nie znaleziono projektu.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mb-8">
|
||||
{projectData.project.logo && (
|
||||
<div className="flex justify-center mb-8">
|
||||
<img
|
||||
src={projectData.project.logo}
|
||||
alt={projectData.project.title}
|
||||
className="max-h-40 object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4 text-center">{projectData.project.title}</h1>
|
||||
|
||||
{projectData.project.projectTypes && projectData.project.projectTypes.length > 0 && (
|
||||
<div className="flex flex-wrap justify-center gap-2 mb-4">
|
||||
{projectData.project.projectTypes.map(type => (
|
||||
<Link
|
||||
key={type.id}
|
||||
href={`/projekty/${type.slug}`}
|
||||
className="px-3 py-1 text-sm bg-muted rounded-full hover:bg-muted/80"
|
||||
>
|
||||
{type.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: projectData.project.body }}></div>
|
||||
</div>
|
||||
|
||||
{projectData.project.photos && projectData.project.photos.length > 0 && (
|
||||
<div className="mt-8 max-w-4xl mx-auto">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-center">Galeria</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{projectData.project.photos.map((photo, index) => (
|
||||
<ImageLightbox
|
||||
key={photo.id}
|
||||
images={projectData.project.photos as Array<{
|
||||
id: number;
|
||||
image_path: string;
|
||||
image_desc?: string;
|
||||
}>}
|
||||
initialIndex={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AttachmentsList attachments={projectData.project.attachments || []} />
|
||||
|
||||
<div className="mt-8 pt-4 border-t border-border max-w-3xl mx-auto text-center">
|
||||
<Link
|
||||
href={`/projekty/${typeSlug}`}
|
||||
className="inline-flex items-center text-primary hover:underline"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Powrót do listy projektów
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
185
resources/js/pages/projects/projects.tsx
Normal file
185
resources/js/pages/projects/projects.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import { Head, Link } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
|
||||
interface ProjectType {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
body: string;
|
||||
logo: string;
|
||||
active: boolean;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
projectTypes: ProjectType[];
|
||||
}
|
||||
|
||||
interface ProjectsApiResponse {
|
||||
projects: Project[];
|
||||
projectType: ProjectType | null;
|
||||
}
|
||||
|
||||
interface ProjectsPageProps {
|
||||
typeSlug?: string;
|
||||
}
|
||||
|
||||
export default function Projects({ typeSlug }: ProjectsPageProps) {
|
||||
const [projectsData, setProjectsData] = useState<ProjectsApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const url = `/api/projects/${encodeURIComponent(typeSlug || '')}`;
|
||||
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setProjectsData(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching projects:', error);
|
||||
setProjectsData(null);
|
||||
setLoading(false);
|
||||
});
|
||||
}, [typeSlug]);
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Projekty',
|
||||
href: '#',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
title: projectsData?.projectType?.title || 'Projekty',
|
||||
href: typeSlug ? `/projekty/${typeSlug}` : '/projekty',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={breadcrumbs}>
|
||||
<Head title={`${projectsData?.projectType?.title || 'Projekty'}`} />
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-xl mx-auto px-4 xl:px-0 pt-8 pb-12">
|
||||
|
||||
<h1 className="text-3xl font-bold mb-6">{projectsData?.projectType?.title || 'Projekty'}</h1>
|
||||
|
||||
{projectsData?.projectType === null && projectsData?.projects && projectsData.projects.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
<Link
|
||||
href="/projekty"
|
||||
className={`px-3 py-1 text-sm rounded-full ${!typeSlug ? 'bg-primary text-primary-foreground' : 'bg-muted hover:bg-muted/80'}`}
|
||||
>
|
||||
Wszystkie
|
||||
</Link>
|
||||
{Array.from(new Set(
|
||||
projectsData.projects.flatMap(project =>
|
||||
project.projectTypes.map(type => JSON.stringify(type))
|
||||
)
|
||||
)).map(typeString => {
|
||||
const type = JSON.parse(typeString) as ProjectType;
|
||||
return (
|
||||
<Link
|
||||
key={type.id}
|
||||
href={`/projekty/${type.slug}`}
|
||||
className={`px-3 py-1 text-sm rounded-full ${typeSlug === type.slug ? 'bg-primary text-primary-foreground' : 'bg-muted hover:bg-muted/80'}`}
|
||||
>
|
||||
{type.title}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie...</div>
|
||||
</div>
|
||||
) : !projectsData || !projectsData.projects || projectsData.projects.length === 0 ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Brak projektów.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="space-y-8 mb-8">
|
||||
{projectsData.projects.map((project) => {
|
||||
function stripHtml(html: string) {
|
||||
const htmlWithSpaces = html
|
||||
.replace(/<br\s*\/?>/gi, ' ')
|
||||
.replace(/<\/p><p>/gi, ' ')
|
||||
.replace(/<\/div><div>/gi, ' ')
|
||||
.replace(/<\/h[1-6]><h[1-6]>/gi, ' ')
|
||||
.replace(/<\/li><li>/gi, ' ');
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = htmlWithSpaces;
|
||||
|
||||
return (div.textContent || div.innerText || '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
const plainText = stripHtml(project.body);
|
||||
const shortText = plainText.length > 200
|
||||
? plainText.slice(0, 200).replace(/\s+$/, '') + '…'
|
||||
: plainText;
|
||||
|
||||
return (
|
||||
<div key={project.id} className="p-6 bg-card rounded-lg shadow-sm">
|
||||
{project.logo && (
|
||||
<div className="flex justify-center mb-4">
|
||||
<img
|
||||
src={project.logo}
|
||||
alt={project.title}
|
||||
className="max-h-24 object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<h2 className="text-2xl font-bold mb-2">{project.title}</h2>
|
||||
|
||||
{project.projectTypes && project.projectTypes.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mb-3">
|
||||
{project.projectTypes.map(type => (
|
||||
<Link
|
||||
key={type.id}
|
||||
href={`/projekty/${type.slug}`}
|
||||
className="px-2 py-0.5 text-xs bg-muted rounded-full hover:bg-muted/80"
|
||||
>
|
||||
{type.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-foreground mb-4">{shortText}</div>
|
||||
<Link
|
||||
href={`/projekty/${project.projectTypes && project.projectTypes.length > 0 ? project.projectTypes[0].slug : (typeSlug || '')}/${project.slug}`}
|
||||
className="inline-block text-primary hover:underline font-semibold"
|
||||
>
|
||||
Czytaj więcej
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
108
resources/js/pages/telephones.tsx
Normal file
108
resources/js/pages/telephones.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Phone } from 'lucide-react';
|
||||
|
||||
interface TelephoneData {
|
||||
name: string;
|
||||
number: string;
|
||||
}
|
||||
|
||||
interface TelephoneEntry {
|
||||
type: string;
|
||||
data: TelephoneData;
|
||||
}
|
||||
|
||||
interface TelephoneItem {
|
||||
id: number;
|
||||
section: string;
|
||||
telephones: TelephoneEntry[];
|
||||
sort_order: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface TelephonesApiResponse {
|
||||
telephones: TelephoneItem[];
|
||||
}
|
||||
|
||||
const getBreadcrumbs = (): BreadcrumbItem[] => [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Telefony',
|
||||
href: '/telefony',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Telephones() {
|
||||
const [telephonesData, setTelephonesData] = useState<TelephonesApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch('/api/telephones')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setTelephonesData(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching telephones:', error);
|
||||
setTelephonesData(null);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={getBreadcrumbs()}>
|
||||
<Head title="Telefony" />
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-lg mx-auto px-4 xl:px-0 pt-8 pb-12 min-h-[75vh]">
|
||||
<h1 className="text-3xl font-bold mb-8 text-center">Telefony</h1>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie zawartości...</div>
|
||||
</div>
|
||||
) : !telephonesData || !telephonesData.telephones || telephonesData.telephones.length === 0 ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Brak danych.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{telephonesData.telephones.map((item) => (
|
||||
<div key={item.id} className="bg-card rounded-lg shadow-sm overflow-hidden">
|
||||
<div className="bg-foreground dark:bg-primary contrast:bg-primary p-4">
|
||||
<h2 className="text-xl font-semibold text-primary-foreground">{item.section}</h2>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<ul className="space-y-4">
|
||||
{item.telephones.map((telephone, index) => (
|
||||
<li key={index} className="flex items-center justify-between group">
|
||||
<div className="flex items-center">
|
||||
<Phone className="h-5 w-5 mr-3 text-primary" />
|
||||
<span className="font-medium">{telephone.data.name}</span>
|
||||
</div>
|
||||
<a
|
||||
href={`tel:${telephone.data.number.replace(/\s+/g, '')}`}
|
||||
className="text-primary font-semibold hover:underline transition-colors"
|
||||
>
|
||||
{telephone.data.number}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user