Immobilien & User hinzugefügt
This commit is contained in:
153
templates/immobilie/index.html.twig
Normal file
153
templates/immobilie/index.html.twig
Normal file
@@ -0,0 +1,153 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Immobilien - {{ parent() }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<style>
|
||||
.immobilien-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.immobilie-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.immobilie-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
.immobilie-header {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
}
|
||||
.immobilie-typ {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.immobilie-body {
|
||||
padding: 20px;
|
||||
}
|
||||
.immobilie-preis {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #4CAF50;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.immobilie-details {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.immobilie-details li {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.immobilie-details li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.badge-success {
|
||||
background: #e8f5e9;
|
||||
color: #4CAF50;
|
||||
}
|
||||
.btn-details {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.btn-details:hover {
|
||||
background: #45a049;
|
||||
color: white;
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: #45a049;
|
||||
color: white;
|
||||
}
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="page-header">
|
||||
<h2>Verfügbare Immobilien</h2>
|
||||
<div>
|
||||
<a href="{{ path('app_immobilie_suche') }}" class="btn-primary">Erweiterte Suche</a>
|
||||
<a href="/api" class="btn-primary">API</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if immobilien|length > 0 %}
|
||||
<div class="immobilien-grid">
|
||||
{% for immobilie in immobilien %}
|
||||
<div class="immobilie-card">
|
||||
<div class="immobilie-header">
|
||||
<div class="immobilie-typ">{{ immobilie.typ.label }}</div>
|
||||
<strong>{{ immobilie.adresse }}</strong>
|
||||
</div>
|
||||
<div class="immobilie-body">
|
||||
<div class="immobilie-preis">{{ immobilie.preis|number_format(2, ',', '.') }} €</div>
|
||||
|
||||
<ul class="immobilie-details">
|
||||
<li>📐 Fläche: {{ immobilie.flaeche }} m²</li>
|
||||
<li>🛏️ Zimmer: {{ immobilie.zimmer }}</li>
|
||||
<li>💰 Preis/m²: {{ immobilie.preisProQm|number_format(2, ',', '.') }} €</li>
|
||||
{% if immobilie.baujahr %}
|
||||
<li>📅 Baujahr: {{ immobilie.baujahr }}</li>
|
||||
{% endif %}
|
||||
{% if immobilie.garage %}
|
||||
<li>🚗 <span class="badge badge-success">Mit Garage</span></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
<a href="{{ path('app_immobilie_show', {id: immobilie.id}) }}" class="btn-details">
|
||||
Details ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="no-results">
|
||||
<h3>Keine Immobilien verfügbar</h3>
|
||||
<p>Aktuell sind keine Immobilien in unserem System verfügbar.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
211
templates/immobilie/show.html.twig
Normal file
211
templates/immobilie/show.html.twig
Normal file
@@ -0,0 +1,211 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}{{ immobilie.adresse }} - {{ parent() }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<style>
|
||||
.immobilie-detail {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
padding: 30px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.immobilie-header {
|
||||
border-bottom: 2px solid #4CAF50;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.immobilie-typ-badge {
|
||||
display: inline-block;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.immobilie-adresse {
|
||||
font-size: 28px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.immobilie-preis-box {
|
||||
background: #e8f5e9;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.preis-haupt {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #4CAF50;
|
||||
}
|
||||
.preis-pro-qm {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.detail-box {
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #4CAF50;
|
||||
}
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.detail-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.beschreibung-box {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.status-verfuegbar {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
.status-nicht-verfuegbar {
|
||||
background: #f44336;
|
||||
color: white;
|
||||
}
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
}
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.features-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.features-list li {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.features-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.feature-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<a href="{{ path('app_immobilie_index') }}" class="back-link">← Zurück zur Übersicht</a>
|
||||
|
||||
<div class="immobilie-detail">
|
||||
<div class="immobilie-header">
|
||||
<span class="immobilie-typ-badge">{{ immobilie.typ.label }}</span>
|
||||
<h2 class="immobilie-adresse">{{ immobilie.adresse }}</h2>
|
||||
<span class="status-badge {{ immobilie.verfuegbar ? 'status-verfuegbar' : 'status-nicht-verfuegbar' }}">
|
||||
{{ immobilie.verfuegbar ? 'Verfügbar' : 'Nicht verfügbar' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="immobilie-preis-box">
|
||||
<div class="preis-haupt">{{ immobilie.preis|number_format(2, ',', '.') }} €</div>
|
||||
<div class="preis-pro-qm">{{ immobilie.preisProQm|number_format(2, ',', '.') }} € pro m²</div>
|
||||
</div>
|
||||
|
||||
<h3>Hauptmerkmale</h3>
|
||||
<div class="details-grid">
|
||||
<div class="detail-box">
|
||||
<div class="detail-label">Wohnfläche</div>
|
||||
<div class="detail-value">{{ immobilie.flaeche }} m²</div>
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<div class="detail-label">Zimmer</div>
|
||||
<div class="detail-value">{{ immobilie.zimmer }}</div>
|
||||
</div>
|
||||
{% if immobilie.baujahr %}
|
||||
<div class="detail-box">
|
||||
<div class="detail-label">Baujahr</div>
|
||||
<div class="detail-value">{{ immobilie.baujahr }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if immobilie.etage is not null %}
|
||||
<div class="detail-box">
|
||||
<div class="detail-label">Etage</div>
|
||||
<div class="detail-value">{{ immobilie.etage }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<h3>Ausstattung & Extras</h3>
|
||||
<ul class="features-list">
|
||||
<li>
|
||||
<span class="feature-icon">🚗</span>
|
||||
<strong>Garage:</strong> {{ immobilie.garage ? 'Ja' : 'Nein' }}
|
||||
</li>
|
||||
{% if immobilie.balkonFlaeche %}
|
||||
<li>
|
||||
<span class="feature-icon">🌿</span>
|
||||
<strong>Balkon:</strong> {{ immobilie.balkonFlaeche }} m²
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if immobilie.kellerFlaeche %}
|
||||
<li>
|
||||
<span class="feature-icon">📦</span>
|
||||
<strong>Keller:</strong> {{ immobilie.kellerFlaeche }} m²
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if immobilie.heizungstyp %}
|
||||
<li>
|
||||
<span class="feature-icon">🔥</span>
|
||||
<strong>Heizung:</strong> {{ immobilie.heizungstyp }}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if immobilie.nebenkosten %}
|
||||
<li>
|
||||
<span class="feature-icon">💶</span>
|
||||
<strong>Nebenkosten:</strong> {{ immobilie.nebenkosten|number_format(2, ',', '.') }} € / Monat
|
||||
</li>
|
||||
{% endif %}
|
||||
<li>
|
||||
<span class="feature-icon">📊</span>
|
||||
<strong>Gesamtfläche:</strong> {{ immobilie.gesamtflaeche }} m²
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% if immobilie.beschreibung %}
|
||||
<h3>Beschreibung</h3>
|
||||
<div class="beschreibung-box">
|
||||
{{ immobilie.beschreibung|nl2br }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; color: #666; font-size: 14px;">
|
||||
Erstellt am: {{ immobilie.createdAt|date('d.m.Y H:i') }} Uhr<br>
|
||||
Zuletzt aktualisiert: {{ immobilie.updatedAt|date('d.m.Y H:i') }} Uhr
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
103
templates/immobilie/suche.html.twig
Normal file
103
templates/immobilie/suche.html.twig
Normal file
@@ -0,0 +1,103 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Immobiliensuche - {{ parent() }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<style>
|
||||
.search-box {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
padding: 30px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.api-links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.api-link-card {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #4CAF50;
|
||||
}
|
||||
.api-link-card h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #4CAF50;
|
||||
}
|
||||
.api-link-card a {
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
}
|
||||
.api-link-card a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.api-link-card p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
}
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<a href="{{ path('app_immobilie_index') }}" class="back-link">← Zurück zur Übersicht</a>
|
||||
|
||||
<div class="search-box">
|
||||
<h2>Immobiliensuche über API</h2>
|
||||
<p>Nutzen Sie die REST-API für erweiterte Suchfunktionen. Hier sind einige nützliche Endpoints:</p>
|
||||
|
||||
<div class="api-links">
|
||||
<div class="api-link-card">
|
||||
<h4>Alle Immobilien</h4>
|
||||
<a href="/api/immobilies">
|
||||
/api/immobilies
|
||||
</a>
|
||||
<p>Liste aller Immobilien (JSON-LD Format)</p>
|
||||
</div>
|
||||
|
||||
<div class="api-link-card">
|
||||
<h4>API-Dokumentation</h4>
|
||||
<a href="/api">/api</a>
|
||||
<p>Vollständige API-Dokumentation mit allen verfügbaren Operationen</p>
|
||||
</div>
|
||||
|
||||
<div class="api-link-card">
|
||||
<h4>Einzelne Immobilie</h4>
|
||||
<a href="/api/immobilies/1">
|
||||
/api/immobilies/{id}
|
||||
</a>
|
||||
<p>Details zu einer bestimmten Immobilie</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top: 40px;">Beispiel-Abfragen</h3>
|
||||
|
||||
<div class="api-link-card" style="margin-top: 20px;">
|
||||
<h4>Repository-Methoden (Backend)</h4>
|
||||
<p>Das ImmobilieRepository bietet folgende Suchmethoden:</p>
|
||||
<ul>
|
||||
<li><code>findVerfuegbare()</code> - Nur verfügbare Immobilien</li>
|
||||
<li><code>findByTyp(ImmobilienTyp)</code> - Nach Typ filtern</li>
|
||||
<li><code>findByPreisRange($min, $max)</code> - Preisspanne</li>
|
||||
<li><code>findByFlaecheRange($min, $max)</code> - Flächenbereich</li>
|
||||
<li><code>findMitGarage()</code> - Immobilien mit Garage</li>
|
||||
<li><code>findByMinZimmer($anzahl)</code> - Mindestanzahl Zimmer</li>
|
||||
<li><code>searchByAdresse($search)</code> - Adresssuche</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user