fragdenrat/templates/index.html
2025-08-19 09:46:19 +02:00

126 lines
No EOL
4.6 KiB
HTML

{% extends "base.html" %}
{% block title %}Fragify{% endblock %}
{% block content %}
<div class="text-center">
<h1 class="title display-4">Fragify</h1>
<p class="description">
Erstelle einfach Links für Anfragen bei dem Portal
<a href="https://fragdenstaat.de" target="_blank" class="text-decoration-none">FragDenStaat.de</a>,
welche du vorausfüllen und an Freund:innen schicken kannst!
</p>
<form id="fragifyForm" class="text-start">
<div class="mb-4">
<label for="publicbody" class="form-label fw-bold">Behörde</label>
<select class="form-select" id="publicbody" name="publicbody_id" required>
<option value="">Behörde auswählen...</option>
</select>
</div>
<div class="mb-4">
<label for="subject" class="form-label fw-bold">Betreff</label>
<input type="text" class="form-control" id="subject" name="subject"
placeholder="Betreff der Anfrage" required>
</div>
<div class="mb-4">
<label for="body" class="form-label fw-bold">Dokumente anfragen:</label>
<textarea class="form-control" id="body" name="body" rows="5"
placeholder="Beschreibe hier, welche Dokumente oder Informationen du anfragen möchtest..." required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-lg">
<span class="btn-text">Anfrage Link generieren</span>
<span class="loading spinner-border spinner-border-sm ms-2" role="status"></span>
</button>
</div>
</form>
<div id="result" class="mt-4" style="display: none;">
<h5 class="text-success mb-3">Link erfolgreich generiert!</h5>
<div class="input-group">
<input type="text" class="form-control" id="generatedLinkInput" readonly>
<button class="btn btn-outline-primary" type="button" id="copyBtn">In Zwischenablage</button>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
$(document).ready(function() {
// Initialize Select2 for public bodies
$('#publicbody').select2({
theme: 'bootstrap-5',
placeholder: 'Behörde auswählen...',
allowClear: true,
width: '100%',
ajax: {
url: '/api/publicbodies',
dataType: 'json',
delay: 250,
data: function(params) {
return {
search: params.term,
page: params.page || 1
};
},
processResults: function(data, params) {
params.page = params.page || 1;
return {
results: data.objects.map(function(item) {
return {
id: item.id,
text: item.name + ' (' + item.jurisdiction.name + ')'
};
}),
pagination: {
more: data.meta.next !== null
}
};
},
cache: true
}
});
// Handle form submission (client-side)
$('#fragifyForm').on('submit', function(e) {
e.preventDefault();
const publicbodyId = $('#publicbody').val() || '';
const subject = $('#subject').val() || '';
const body = $('#body').val() || '';
let link = 'https://fragdenstaat.de/anfrage-stellen/';
if (publicbodyId) {
link += `an/${publicbodyId}/`;
}
const params = new URLSearchParams();
if (subject) params.set('subject', subject);
if (body) params.set('body', body);
if ([...params].length > 0) {
link += `?${params.toString()}`;
}
$('#generatedLinkInput').val(link);
$('#result').show();
});
// Copy to clipboard
$(document).on('click', '#copyBtn', function() {
const link = $('#generatedLinkInput').val();
navigator.clipboard.writeText(link).then(function() {
const btn = $('#copyBtn');
const originalText = btn.text();
btn.text('Kopiert!');
setTimeout(() => btn.text(originalText), 1500);
});
});
});
</script>
{% endblock %}