109 lines
4.5 KiB
TypeScript
109 lines
4.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { FaChevronDown, FaChevronUp, FaFilePdf, FaRuler } from 'react-icons/fa';
|
|
import styles from './BauvorschriftenSection.module.css';
|
|
|
|
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 [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' }} />
|
|
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}>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}>Vollgeschosse:</span>
|
|
<span className={styles.value}>{bauvorschriften.vollgeschosse}</span>
|
|
</div>
|
|
)}
|
|
{bauvorschriften.gebaeudelaengeMax !== undefined && bauvorschriften.gebaeudelaengeMax !== null && (
|
|
<div className={styles.bauvorschriftItem}>
|
|
<span className={styles.label}>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}>Grenzabstand:</span>
|
|
<span className={styles.value}>{bauvorschriften.grenzabstand} m</span>
|
|
</div>
|
|
)}
|
|
{bauvorschriften.mehrlaengenzuschlag && (
|
|
<div className={styles.bauvorschriftItem}>
|
|
<span className={styles.label}>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}>Höchstmass max:</span>
|
|
<span className={styles.value}>{bauvorschriften.hoechstmassMax} m</span>
|
|
</div>
|
|
)}
|
|
{bauvorschriften.fassadenhoehe && (
|
|
<div className={styles.bauvorschriftItem}>
|
|
<span className={styles.label}>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' }} />
|
|
Nutzungsplan öffnen
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{bauvorschriften.extraktionsDatum && (
|
|
<div className={styles.bauvorschriftenFooter}>
|
|
<span className={styles.lastUpdated}>
|
|
Extrahiert: {new Date(bauvorschriften.extraktionsDatum).toLocaleString('de-CH')}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|