From bc775f67d392d202c7c0bea08227fdbbb582c923 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Mon, 1 Jun 2026 09:55:31 +0200
Subject: [PATCH] DevTools Datetime: Felder-leeren statt Jetzt-verwenden,
 Wochentag beim Geburtstag, Dezimalstellen, Datum ohne Uhrzeit

---
 frontend/src/tools/devtools.jsx | 71 +++++++++++++++++----------------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/frontend/src/tools/devtools.jsx b/frontend/src/tools/devtools.jsx
index 11b2ed6..0880653 100644
--- a/frontend/src/tools/devtools.jsx
+++ b/frontend/src/tools/devtools.jsx
@@ -600,13 +600,15 @@ function DatetimeRechner({ mobile }) {
 
     const nextBday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
     if (nextBday <= today) nextBday.setFullYear(today.getFullYear()+1);
-    const diffMs = nextBday - today;
-    const diffD  = Math.ceil(diffMs / 86400000);
-    const totalD = Math.floor((today - birth) / 86400000);
+    const diffMs  = nextBday - today;
+    const diffD   = (diffMs / 86400000).toFixed(1);
+    const totalD  = Math.floor((today - birth) / 86400000);
+    const nextWday = WEEKDAYS[nextBday.getDay()];
 
-    setBdayResult({ age, diffD, totalD, wday: WEEKDAYS[birth.getDay()],
+    setBdayResult({ age, diffD, totalD,
+      wday: WEEKDAYS[birth.getDay()],
       geburtstag: `${pad2(birth.getDate())}.${pad2(birth.getMonth()+1)}.${birth.getFullYear()}`,
-      nextDate: `${pad2(nextBday.getDate())}.${pad2(nextBday.getMonth()+1)}.${nextBday.getFullYear()}`,
+      nextDate: `${pad2(nextBday.getDate())}.${pad2(nextBday.getMonth()+1)}.${nextBday.getFullYear()} (${nextWday})`,
     });
   }
 
@@ -620,12 +622,13 @@ function DatetimeRechner({ mobile }) {
     const dA = new Date(a), dB = new Date(b);
     if (isNaN(dA)||isNaN(dB)) { setDiffResult(null); return; }
     const ms = Math.abs(dB - dA);
-    const s  = Math.floor(ms/1000);
-    const m  = Math.floor(s/60);
-    const h  = Math.floor(m/60);
-    const d  = Math.floor(h/24);
-    const weeks = Math.floor(d/7);
-    const months = Math.abs(dB.getMonth()-dA.getMonth() + (dB.getFullYear()-dA.getFullYear())*12);
+    const s  = (ms / 1000).toFixed(1);
+    const m  = (ms / 60000).toFixed(1);
+    const h  = (ms / 3600000).toFixed(2);
+    const d  = (ms / 86400000).toFixed(2);
+    const weeks  = (ms / (86400000*7)).toFixed(2);
+    const dA2 = new Date(Math.min(dA,dB)), dB2 = new Date(Math.max(dA,dB));
+    const months = Math.abs(dB2.getMonth()-dA2.getMonth() + (dB2.getFullYear()-dA2.getFullYear())*12);
     setDiffResult({ ms, s, m, h, d, weeks, months });
   }
 
@@ -667,15 +670,9 @@ function DatetimeRechner({ mobile }) {
                 value={conv.local||''} onChange={e=>{ setConv(p=>({...p,local:e.target.value})); convFromLocal(e.target.value); }}/>
             </div>
           </div>
-          <button style={{...S.btn('#4ecdc4',false), fontSize:11, padding:'6px 14px', marginBottom:16}}
-            onClick={()=>{
-              const d = new Date();
-              const unixSec = Math.floor(d.getTime()/1000);
-              const mosesVal = unixMsToMoses(d.getTime());
-              setConv({unix:String(unixSec), moses:String(mosesVal), local:toLocalISO(d)});
-              convFromUnix(String(unixSec));
-            }}>
-            Jetzt verwenden
+          <button style={{...S.btn('#ff6b9d',false), fontSize:11, padding:'6px 14px', marginBottom:16}}
+            onClick={()=>{ setConv({unix:'',moses:'',local:''}); setConvResult(null); }}>
+            ✕ Felder leeren
           </button>
           {convResult && (
             <div>
@@ -704,10 +701,14 @@ function DatetimeRechner({ mobile }) {
 
       {tab==='bday' && (
         <div>
-          <div style={{marginBottom:16}}>
-            <div style={lbl}>Geburtsdatum</div>
-            <input style={{...inp, maxWidth:220}} type="date" value={bday}
-              onChange={e=>calcBday(e.target.value)}/>
+          <div style={{display:'flex',alignItems:'flex-end',gap:10,marginBottom:16,flexWrap:'wrap'}}>
+            <div>
+              <div style={lbl}>Geburtsdatum</div>
+              <input style={{...inp, maxWidth:220}} type="date" value={bday}
+                onChange={e=>calcBday(e.target.value)}/>
+            </div>
+            {!!bday && <button style={{...S.btn('#ff6b9d',false), fontSize:11, padding:'6px 14px'}}
+              onClick={()=>{ setBday(''); setBdayResult(null); }}>✕ Leeren</button>}
           </div>
           {bdayResult && (
             <div>
@@ -731,29 +732,31 @@ function DatetimeRechner({ mobile }) {
           <div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 1fr',gap:12,marginBottom:16}}>
             <div>
               <div style={lbl}>Von</div>
-              <input style={inp} type="datetime-local" value={dtA}
+              <input style={inp} type="date" value={dtA}
                 onChange={e=>{ setDtA(e.target.value); calcDiff(e.target.value, dtB); }}/>
             </div>
             <div>
               <div style={lbl}>Bis</div>
-              <input style={inp} type="datetime-local" value={dtB}
+              <input style={inp} type="date" value={dtB}
                 onChange={e=>{ setDtB(e.target.value); calcDiff(dtA, e.target.value); }}/>
             </div>
           </div>
+          {!!(dtA||dtB) && <button style={{...S.btn('#ff6b9d',false), fontSize:11, padding:'6px 14px', marginBottom:16}}
+            onClick={()=>{ setDtA(''); setDtB(''); setDiffResult(null); }}>✕ Felder leeren</button>}
           {diffResult && (
             <div>
-              <DtRow label="Millisekunden" value={diffResult.ms.toLocaleString('de-DE')} muted/>
-              <DtRow label="Sekunden" value={diffResult.s.toLocaleString('de-DE')}/>
-              <DtRow label="Minuten" value={diffResult.m.toLocaleString('de-DE')}/>
-              <DtRow label="Stunden" value={diffResult.h.toLocaleString('de-DE')}/>
-              <DtRow label="Tage" value={diffResult.d.toLocaleString('de-DE')}/>
-              <DtRow label="Wochen" value={`~${diffResult.weeks}`} muted/>
-              <DtRow label="Monate" value={`~${diffResult.months}`} muted/>
+              <DtRow label="Millisekunden" value={Number(diffResult.ms).toLocaleString('de-DE')} muted/>
+              <DtRow label="Sekunden"      value={Number(diffResult.s).toLocaleString('de-DE')}/>
+              <DtRow label="Minuten"       value={Number(diffResult.m).toLocaleString('de-DE')}/>
+              <DtRow label="Stunden"       value={Number(diffResult.h).toLocaleString('de-DE')}/>
+              <DtRow label="Tage"          value={Number(diffResult.d).toLocaleString('de-DE')}/>
+              <DtRow label="Wochen"        value={Number(diffResult.weeks).toLocaleString('de-DE')} muted/>
+              <DtRow label="Monate (ca.)"  value={`~${diffResult.months}`} muted/>
             </div>
           )}
           {!diffResult && (
             <div style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:11}}>
-              Zwei Zeitpunkte eingeben
+              Zwei Datumswerte eingeben
             </div>
           )}
         </div>