260 lines
No EOL
11 KiB
HTML
260 lines
No EOL
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}MeinAntrag{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="text-center">
|
|
<h1 class="title display-4">MeinAntrag</h1>
|
|
<p class="description">
|
|
Erstelle einfach Vorlagen für Anfragen oder Anträge an die Karlsruher Stadtverwaltung
|
|
zu deinem persönlichen Thema und schicke diese direkt an eine Stadtratsfraktion!
|
|
</p>
|
|
|
|
<form id="meinantragForm" class="text-start">
|
|
<div id="inputFields">
|
|
<div class="mb-4">
|
|
<label for="party" class="form-label fw-bold">Fraktion</label>
|
|
<select class="form-select" id="party" name="party_id" required>
|
|
<option value="">Fraktion auswählen...</option>
|
|
<option value="SPD">SPD</option>
|
|
<option value="GRÜNEN">GRÜNEN</option>
|
|
<option value="CDU">CDU</option>
|
|
<option value="FDP/FW">FDP/FW</option>
|
|
<option value="Volt">Volt</option>
|
|
<option value="DIE LINKE">DIE LINKE</option>
|
|
<option value="KAL">KAL</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="anliegen" class="form-label fw-bold">Mein Anliegen:</label>
|
|
<textarea class="form-control" id="anliegen" name="anliegen" rows="5"
|
|
placeholder="Beschreibe hier, welche Anfrage oder Antrag du an die Stadtverwaltung stellen möchtest ..." required></textarea>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<span class="btn-text">Antrag generieren</span>
|
|
<span class="loading spinner-border spinner-border-sm ms-2" role="status"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="resultFields" class="text-start" style="display: none;">
|
|
<div class="mb-3">
|
|
<a href="#" id="backLink" class="text-decoration-none">
|
|
<span>← Zurück</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="antragstitel" class="form-label fw-bold">Antragstitel</label>
|
|
<input type="text" class="form-control" id="antragstitel" name="antragstitel">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="forderung" class="form-label fw-bold">Forderung</label>
|
|
<textarea class="form-control" id="forderung" name="forderung" rows="5"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="begruendung" class="form-label fw-bold">Begründung/Sachverhalt</label>
|
|
<textarea class="form-control" id="begruendung" name="begruendung" rows="8"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-4 d-flex gap-2 flex-wrap justify-content-center">
|
|
<button type="button" class="btn btn-primary" id="mailBtn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope me-2" viewBox="0 0 16 16">
|
|
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
|
|
</svg>
|
|
<span id="mailBtnText">Mail an Fraktion senden</span>
|
|
</button>
|
|
<button type="button" class="btn btn-primary" id="wordBtn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-word me-2" viewBox="0 0 16 16">
|
|
<path d="M5.485 6.879a.5.5 0 1 0-.97.242l1.5 6a.5.5 0 0 0 .539.314l1.5-.5a.5.5 0 0 0 .186-.596l-.737-2.945 2.679-3.42a.5.5 0 1 0-.758-.652L6.978 8.616l-1.493-.5z"/>
|
|
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
|
|
</svg>
|
|
Word-Datei herunterladen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Handle form submission (client-side)
|
|
$('#meinantragForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const partyId = $('#party').val() || '';
|
|
const anliegen = $('#anliegen').val() || '';
|
|
|
|
if (!anliegen.trim()) {
|
|
alert('Bitte geben Sie ein Anliegen ein.');
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
const $button = $(this).find('button[type="submit"]');
|
|
const $btnText = $button.find('.btn-text');
|
|
const $loading = $button.find('.loading');
|
|
$button.prop('disabled', true);
|
|
$btnText.text('Generiere Antrag...');
|
|
$loading.css('display', 'inline-block');
|
|
|
|
// Prepare form data as URL-encoded
|
|
const formData = new URLSearchParams();
|
|
formData.append('anliegen', anliegen);
|
|
if (partyId) {
|
|
formData.append('party_id', partyId);
|
|
}
|
|
|
|
// Send request to generate text
|
|
fetch('/api/generate-antrag', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: formData.toString()
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => {
|
|
throw new Error(err.error || 'Fehler beim Generieren des Antrags');
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Fill in the result fields
|
|
$('#antragstitel').val(data.title || '');
|
|
$('#forderung').val(data.demand || '');
|
|
$('#begruendung').val(data.justification || '');
|
|
|
|
// Store party name for mail button
|
|
$('#resultFields').data('party-name', data.party_name || '');
|
|
|
|
// Update mail button text
|
|
if (data.party_name) {
|
|
$('#mailBtnText').text('Mail an ' + data.party_name + ' senden');
|
|
}
|
|
|
|
// Hide input fields and show result fields
|
|
$('#inputFields').hide();
|
|
$('#resultFields').show();
|
|
} else {
|
|
throw new Error(data.error || 'Fehler beim Generieren des Antrags');
|
|
}
|
|
|
|
// Reset button state
|
|
$button.prop('disabled', false);
|
|
$btnText.text('Antrag generieren');
|
|
$loading.hide();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Fehler beim Generieren des Antrags: ' + error.message);
|
|
|
|
// Reset button state
|
|
$button.prop('disabled', false);
|
|
$btnText.text('Antrag generieren');
|
|
$loading.hide();
|
|
});
|
|
});
|
|
|
|
// Handle back link click
|
|
$('#backLink').on('click', function(e) {
|
|
e.preventDefault();
|
|
$('#resultFields').hide();
|
|
$('#inputFields').show();
|
|
});
|
|
|
|
// Mail-Kontakte für Fraktionen
|
|
const partyContacts = {
|
|
'SPD': 'spd@karlsruhe.de',
|
|
'GRÜNEN': 'gruene@karlsruhe.de',
|
|
'CDU': 'cdu@karlsruhe.de',
|
|
'FDP/FW': 'fdp@karlsruhe.de',
|
|
'Volt': 'volt@karlsruhe.de',
|
|
'DIE LINKE': 'dielinke@karlsruhe.de',
|
|
'KAL': 'kal@karlsruhe.de'
|
|
};
|
|
|
|
// Handle mail button click
|
|
$('#mailBtn').on('click', function() {
|
|
const partyName = $('#resultFields').data('party-name') || '';
|
|
const email = partyContacts[partyName] || '';
|
|
const subject = encodeURIComponent($('#antragstitel').val() || '');
|
|
const title = $('#antragstitel').val() || '';
|
|
const demand = $('#forderung').val() || '';
|
|
const justification = $('#begruendung').val() || '';
|
|
|
|
// Build email body
|
|
let body = title + '\n\n';
|
|
body += 'Der Gemeinderat möge beschließen:\n';
|
|
body += demand + '\n\n';
|
|
body += 'Begründung/Sachverhalt\n';
|
|
body += justification;
|
|
|
|
const bodyEncoded = encodeURIComponent(body);
|
|
|
|
// Open mail client
|
|
if (email) {
|
|
window.location.href = `mailto:${email}?subject=${subject}&body=${bodyEncoded}`;
|
|
} else {
|
|
alert('Keine E-Mail-Adresse für diese Fraktion hinterlegt.');
|
|
}
|
|
});
|
|
|
|
// Handle Word button click
|
|
$('#wordBtn').on('click', function() {
|
|
const title = $('#antragstitel').val() || '';
|
|
const demand = $('#forderung').val() || '';
|
|
const justification = $('#begruendung').val() || '';
|
|
const partyName = $('#resultFields').data('party-name') || '';
|
|
|
|
// Prepare form data
|
|
const formData = new URLSearchParams();
|
|
formData.append('title', title);
|
|
formData.append('demand', demand);
|
|
formData.append('justification', justification);
|
|
if (partyName) {
|
|
formData.append('party_name', partyName);
|
|
}
|
|
|
|
// Download Word file
|
|
fetch('/api/generate-word', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: formData.toString()
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Generieren der Word-Datei');
|
|
}
|
|
return response.blob();
|
|
})
|
|
.then(blob => {
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'antrag.docx';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Fehler beim Generieren der Word-Datei: ' + error.message);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |