Merge pull request '26-3-Bericht_Teilen' (#27) from 26-3-Bericht_Teilen into main

Reviewed-on: #27
main
Samuel Zielke 3 days ago
commit 90974a37ca

@ -251,6 +251,22 @@
height: 93vh;
transition: height 1s ease, transform 1s ease;
margin: 0;
/* Grundsätzlicher Fix für kleinere Displays (z.B. iPhone 12 mini vs. 15 Pro): die feste
vh-Höhe reicht auf kürzeren Viewports nicht für den ganzen Karten-Stapel, und body hat
overflow:hidden (verhindert Bounce/Pull-to-refresh) - ohne dieses overflow-y wäre alles
unterhalb des sichtbaren Bereichs dauerhaft unerreichbar statt nur eng. */
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* align-self statt der geerbten align-items-center des Elternelements: sonst würde
überlaufender Inhalt (auf kleinen Displays) mittig "geclippt" und wäre weder oben
noch unten per Scroll erreichbar. Betrifft nur das Dashboard, nicht die (kurzen,
weiterhin mittig zentrierten) Willkommens-/Update-Hinweise. */
#dashboard {
align-self: flex-start;
width: 100%;
}
.bg-white-color {

@ -4,6 +4,7 @@ function setUpdateOk() {
document.getElementById('update_content').style.display = 'none';
document.getElementById('dashboard').classList.remove('d-none');
document.getElementById('refresh_icon').classList.remove('d-none')
document.getElementById('share_icon').classList.remove('d-none')
document.getElementById('settings_icon').classList.remove('d-none')
}

@ -18,6 +18,10 @@ const sortFieldMenu = document.getElementById('sortFieldMenu')
const sortFieldOptions = document.querySelectorAll('.sortFieldOption')
const sortDirectionToggle = document.getElementById('sortDirectionToggle')
const sortDirectionIcon = document.getElementById('sortDirectionIcon')
const shareIcon = document.getElementById('share_icon')
const shareReportModalEl = document.getElementById('shareReportModal')
const shareReportStatus = document.getElementById('shareReportStatus')
const shareReportPreview = document.getElementById('shareReportPreview')
var allowToSend = false;
const monate = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
const currentDate = new Date();
@ -39,6 +43,9 @@ var isFilterVisible = true;
// Ob die Aktivitäten-Tabelle gerade maximiert ist (Timer-Karte ist dann ausgeblendet).
var isTableMaximized = false;
// Einträge des gerade angezeigten Monats, für den WhatsApp-Bericht (share_icon) wiederverwendet.
var currentMonthEntries = [];
//
// Trigger
@ -71,6 +78,18 @@ document.addEventListener('DOMContentLoaded', (event) => {
});
});
// Behebt die Bootstrap-Konsolenwarnung "Blocked aria-hidden on an element because its
// descendant retained focus": beim Schließen eines Modals (z.B. per "X"-Button) setzt
// Bootstrap aria-hidden="true", obwohl der geklickte Button noch fokussiert ist. Fix: Fokus
// vor dem Ausblenden gezielt vom Modal wegnehmen. Gilt für alle Modals der Seite.
document.querySelectorAll('.modal').forEach(modalEl => {
modalEl.addEventListener('hide.bs.modal', () => {
if (document.activeElement && modalEl.contains(document.activeElement)) {
document.activeElement.blur()
}
})
})
// Lädt die 55h-Regel Einstellung (SettingsID 3) aus der DB, setzt rule55Active
// und synchronisiert die Checkbox sowie den Badge in der Jahres-Card.
async function loadRule55Setting() {
@ -399,6 +418,77 @@ SETLdcNameSaveButton.addEventListener('click', () => {
SETLdcNameSaveButton.classList.add('d-none')
})
//
// BERICHT FÜR WHATSAPP TEILEN
//
// Baut den vorformatierten Bericht für den gerade angezeigten Monat (WhatsApp-Formatierung: *fett*)
function buildMonthReportText() {
const monthLabel = `${monate[cursorMonth]} ${cursorYear}`
const dienstHours = document.getElementById('monthHourService').innerText
const bibelstudien = document.getElementById('studysinput').value
const ldcHours = document.getElementById('monthHourLDC').innerText
// Sonstige Einträge nach ihrem individuellen Bemerkungstext gruppieren und Stunden je Gruppe summieren
const sonstigeGroups = {}
currentMonthEntries
.filter(entry => entry.type === 3)
.forEach(entry => {
const label = entry.sondertext || 'Sonstiges'
sonstigeGroups[label] = (sonstigeGroups[label] || 0) + entry.duration
})
var message = `Bericht: *${monthLabel}*\n`
message += `Dienst: ${dienstHours}h\n`
message += `Bibelstudien: ${bibelstudien}\n`
message += `Bemerkungen:\n`
message += `${ldcLabel}: ${ldcHours}h`
Object.keys(sonstigeGroups).forEach(label => {
message += `\n${label}: ${formatDuration(sonstigeGroups[label], true)}h`
})
return message
}
// Kopiert Text in die Zwischenablage - mit Fallback für Umgebungen ohne Clipboard-API
async function copyTextToClipboard(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(text)
return
}
const textarea = document.createElement('textarea')
textarea.value = text
textarea.style.position = 'fixed'
textarea.style.opacity = '0'
document.body.appendChild(textarea)
textarea.select()
document.execCommand('copy')
document.body.removeChild(textarea)
}
// Bestätigung als Vorschau-Modal statt kurzem Icon-Blitz: so sieht man den Bericht direkt
// (auch praktisch, wenn man ihn gar nicht kopieren, sondern nur ansehen möchte) und kann
// in Ruhe wieder schließen.
shareIcon.addEventListener('click', () => {
const message = buildMonthReportText()
shareReportPreview.innerText = message
copyTextToClipboard(message)
.then(() => {
shareReportStatus.innerText = '✓ In die Zwischenablage kopiert'
shareReportStatus.style.color = 'rgb(120,170,86)'
})
.catch((error) => {
console.error('Bericht konnte nicht in die Zwischenablage kopiert werden:', error)
shareReportStatus.innerText = 'Kopieren nicht möglich - Text unten manuell markieren'
shareReportStatus.style.color = '#dc3545'
})
.finally(() => {
new bootstrap.Modal(shareReportModalEl).show()
})
})
async function getActualDataAndFillView(monat = currentDate.getMonth(), jahr = currentDate.getFullYear()) {
try {
@ -423,6 +513,7 @@ async function getActualDataAndFillView(monat = currentDate.getMonth(), jahr = c
// Filter funktion aufrufen und entsprechend mit dem aktuellen Datum füllen
const filteredEntries = await filterEntriesByMonthYear(monat === 12 ? 1 : monat + 1, jahr);
currentMonthEntries = filteredEntries
console.log("update-complete")
console.log(jahr)

@ -5,6 +5,7 @@ function setAllOk() {
if (localStorage.getItem('UpdateInfoRead') === document.getElementById('versionnumber').value) {
document.getElementById('dashboard').classList.remove('d-none');
document.getElementById('refresh_icon').classList.remove('d-none')
document.getElementById('share_icon').classList.remove('d-none')
document.getElementById('settings_icon').classList.remove('d-none')
}
}

@ -20,14 +20,23 @@
<div class="container-fluid header-bg-block bg-white-color HeaderDefaultHeightbg" id="header-bg-block">
<div class="container-fluid header-color-block text-center bg-white-color HeaderDefaultHeightcolor" id="header-color-block" style="color: white; width: 100vw;">
<div class="row headerline justify-content-around">
<span class="col-3 d-none" id="refresh_icon"><img onclick="window.location.reload();" src="{% static 'app/images/refresh.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 40%; opacity: 0.75; padding-top: 0.65rem;"></span>
<!-- Flexbox statt Bootstrap-Grid: 4 Icons (refresh, share, settings, settings-close) als
col-3 hätten zusammen mit dem Titel die 12 Spalten gesprengt und wären umgebrochen -
dadurch wurde der Settings-Button vom overflow:hidden des Headers abgeschnitten.
HeaderText ist absolut mittig zur vollen Breite positioniert, damit "PIOMINT" mittig
bleibt, egal wie breit die Icon-Gruppen links/rechts gerade sind. -->
<div class="d-flex align-items-center headerline" style="position: relative; width: 100%; height: 6vh; flex: 0 0 auto; padding: 0 0.75rem;">
<span class="d-none" id="refresh_icon" style="width: 28px; flex: 0 0 auto;"><img onclick="window.location.reload();" src="{% static 'app/images/refresh.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 100%; opacity: 0.75;"></span>
<h3 id="HeaderText" class="pt-2" style="display: none;"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h3>
<h3 id="HeaderText" class="pt-2" style="display: none; margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h3>
<!-- <div class="col-3"></div> -->
<span class="col-3 d-none" id="settings_icon"><img src="{% static 'app/images/settings.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 40%; opacity: 0.75; padding-top: 0.65rem;"></span>
<span class="col-3 d-none" id="settings_close_icon"><img src="{% static 'app/images/close.png' %}" alt="SettingsClose" class="img-fluid" id="image" style="width: 40%; opacity: 0.75; padding-top: 0.65rem;"></span>
<div class="d-flex align-items-center" style="gap: 1rem; margin-left: auto;">
<span class="d-none" id="share_icon" style="width: 28px; flex: 0 0 auto;" title="Bericht für WhatsApp kopieren">
<img id="share_icon_img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(120,170,86)'><path d='M18,16.08c-0.76,0-1.44,0.3-1.96,0.77L8.91,12.7c0.05-0.23,0.09-0.46,0.09-0.7s-0.04-0.47-0.09-0.7l7.05-4.11c0.54,0.5,1.25,0.81,2.04,0.81c1.66,0,3-1.34,3-3c0-1.66-1.34-3-3-3s-3,1.34-3,3c0,0.24,0.04,0.47,0.09,0.7L8.04,9.81C7.5,9.31,6.79,9,6,9c-1.66,0-3,1.34-3,3s1.34,3,3,3c0.79,0,1.5-0.31,2.04-0.81l7.12,4.16c-0.05,0.21-0.08,0.43-0.08,0.65c0,1.61,1.31,2.92,2.92,2.92c1.61,0,2.92-1.31,2.92-2.92C20.92,17.39,19.61,16.08,18,16.08z'/></svg>" alt="Teilen" class="img-fluid" style="width: 100%; opacity: 0.9;">
</span>
<span class="d-none" id="settings_icon" style="width: 28px; flex: 0 0 auto;"><img src="{% static 'app/images/settings.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 100%; opacity: 0.75;"></span>
<span class="d-none" id="settings_close_icon" style="width: 28px; flex: 0 0 auto;"><img src="{% static 'app/images/close.png' %}" alt="SettingsClose" class="img-fluid" id="image" style="width: 100%; opacity: 0.75;"></span>
</div>
</div>
<div class="settings text-left">

@ -287,6 +287,22 @@
</div>
</div>
<!-- BERICHT TEILEN: Vorschau des kopierten Textes, auch als reine Übersicht ohne Kopieren nutzbar -->
<div class="modal fade" id="shareReportModal" tabindex="-1" aria-labelledby="shareReportModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="shareReportModalLabel">Bericht</h5>
<button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Schließen">X</button>
</div>
<div class="modal-body">
<p id="shareReportStatus" class="mb-2" style="font-weight: bold;"></p>
<pre id="shareReportPreview" style="white-space: pre-wrap; font-family: inherit; margin: 0; background-color: #f8f9fa; padding: 0.75rem; border-radius: 0.5rem;"></pre>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
@ -303,6 +319,7 @@
document.getElementById('header-color-block').classList.replace('HeaderDefaultHeightcolor', 'openSettingscolor')
document.getElementById('header-color-block').classList.replace('closeSettingscolor', 'openSettingscolor')
document.getElementById('refresh_icon').style.opacity = 0;
document.getElementById('share_icon').style.opacity = 0;
document.getElementById('settings_icon').classList.add('d-none');
document.getElementById('settings_close_icon').classList.remove('d-none');
})
@ -312,6 +329,7 @@
document.getElementById('settings_icon').classList.remove('d-none');
document.getElementById('settings_close_icon').classList.add('d-none');
document.getElementById('refresh_icon').style.opacity = 1;
document.getElementById('share_icon').style.opacity = 1;
})
</script>

Loading…
Cancel
Save

Powered by TurnKey Linux.