112 lines
4.7 KiB
TypeScript
112 lines
4.7 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { FaChevronDown, FaChevronUp, FaFilePdf, FaRuler } from 'react-icons/fa';
|
||
import styles from './BauvorschriftenSection.module.css';
|
||
|
||
import { useLanguage } from '../../../providers/language/LanguageContext';
|
||
|
||
export interface BauvorschriftenZone {
|
||
zonenbezeichnung: string;
|
||
ausnuetzungsziffer?: number;
|
||
vollgeschosse?: number;
|
||
gebaeudelaengeMax?: number;
|
||
grenzabstand?: number;
|
||
mehrlaengenzuschlag?: string;
|
||
hoechstmassMax?: number;
|
||
fassadenhoehe?: string;
|
||
quelleUrl?: string;
|
||
extraktionsDatum?: string;
|
||
}
|
||
|
||
export interface BauvorschriftenSectionProps {
|
||
bauvorschriften: BauvorschriftenZone;
|
||
}
|
||
|
||
export const BauvorschriftenSection: React.FC<BauvorschriftenSectionProps> = ({ bauvorschriften }) => {
|
||
const { t } = useLanguage();
|
||
const [isExpanded, setIsExpanded] = useState(true);
|
||
|
||
return (
|
||
<div className={styles.bauvorschriftenSection}>
|
||
<div className={styles.bauvorschriftenHeader} onClick={() => setIsExpanded(!isExpanded)}>
|
||
<h4 className={styles.subSectionTitle}>
|
||
<FaRuler style={{ marginRight: '8px', display: 'inline' }} />
|
||
{t('Bauvorschriften')} – {bauvorschriften.zonenbezeichnung}
|
||
</h4>
|
||
<button className={styles.expandButton}>
|
||
{isExpanded ? <FaChevronUp /> : <FaChevronDown />}
|
||
</button>
|
||
</div>
|
||
|
||
{isExpanded && (
|
||
<div className={styles.bauvorschriftenContent}>
|
||
<div className={styles.bauvorschriftenGrid}>
|
||
{bauvorschriften.ausnuetzungsziffer !== undefined && bauvorschriften.ausnuetzungsziffer !== null && (
|
||
<div className={styles.bauvorschriftItem}>
|
||
<span className={styles.label}>{t('Ausnützungsziffer')}</span>
|
||
<span className={styles.value}>{bauvorschriften.ausnuetzungsziffer}%</span>
|
||
</div>
|
||
)}
|
||
{bauvorschriften.vollgeschosse !== undefined && bauvorschriften.vollgeschosse !== null && (
|
||
<div className={styles.bauvorschriftItem}>
|
||
<span className={styles.label}>{t('Vollgeschosse')}</span>
|
||
<span className={styles.value}>{bauvorschriften.vollgeschosse}</span>
|
||
</div>
|
||
)}
|
||
{bauvorschriften.gebaeudelaengeMax !== undefined && bauvorschriften.gebaeudelaengeMax !== null && (
|
||
<div className={styles.bauvorschriftItem}>
|
||
<span className={styles.label}>{t('Gebäudelänge max.')}</span>
|
||
<span className={styles.value}>{bauvorschriften.gebaeudelaengeMax} m</span>
|
||
</div>
|
||
)}
|
||
{bauvorschriften.grenzabstand !== undefined && bauvorschriften.grenzabstand !== null && (
|
||
<div className={styles.bauvorschriftItem}>
|
||
<span className={styles.label}>{t('Grenzabstand')}</span>
|
||
<span className={styles.value}>{bauvorschriften.grenzabstand} m</span>
|
||
</div>
|
||
)}
|
||
{bauvorschriften.mehrlaengenzuschlag && (
|
||
<div className={styles.bauvorschriftItem}>
|
||
<span className={styles.label}>{t('Mehrlängenzuschlag')}</span>
|
||
<span className={styles.value}>{bauvorschriften.mehrlaengenzuschlag}</span>
|
||
</div>
|
||
)}
|
||
{bauvorschriften.hoechstmassMax !== undefined && bauvorschriften.hoechstmassMax !== null && (
|
||
<div className={styles.bauvorschriftItem}>
|
||
<span className={styles.label}>{t('Höchstmaß max.')}</span>
|
||
<span className={styles.value}>{bauvorschriften.hoechstmassMax} m</span>
|
||
</div>
|
||
)}
|
||
{bauvorschriften.fassadenhoehe && (
|
||
<div className={styles.bauvorschriftItem}>
|
||
<span className={styles.label}>{t('Fassadenhöhe')}</span>
|
||
<span className={styles.value}>{bauvorschriften.fassadenhoehe}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{bauvorschriften.quelleUrl && bauvorschriften.quelleUrl !== 'config' && (
|
||
<div className={styles.sourceLink}>
|
||
<a
|
||
href={bauvorschriften.quelleUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className={styles.sourceLinkButton}
|
||
>
|
||
<FaFilePdf style={{ marginRight: '8px' }} />
|
||
{t('Nutzungsplan öffnen')}
|
||
</a>
|
||
</div>
|
||
)}
|
||
|
||
{bauvorschriften.extraktionsDatum && (
|
||
<div className={styles.bauvorschriftenFooter}>
|
||
<span className={styles.lastUpdated}>
|
||
{t('Extrahiert')}: {new Date(bauvorschriften.extraktionsDatum).toLocaleString('de-CH')}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|