Hilfe bei Zeitberechnung

[Onyx]

Guten Tag alle miteinander.

Ich bin gerade dabei eine Art Aufgabenübersicht zu machen.
Dazu habe ich einen timestamp in der Datenbank, wenn ich das ganze beginne und eine Spalte welche mir die Dauer (in Sekunden) angibt die es benötigt, bis das ganze beendet ist.
Nun möchte ich, wenn ich das ganze zum Beispiel um 12 Uhr beginne und die Zeit in 600 Sekunden ~ 10 Minuten angegeben ist, mir angezeigt wird wie lange es noch dauert, sprich ~ noch 8 Minuten, 7,6,... usw.

Hat hier vielleicht jemand einen Lösungsvorschlag für mich? Das ganze in und aus der Datenbank zu bekommen ist kein Problem. Ich komme lediglich bei dieser Geschichte nicht weiter.


Liebe Grüße

[akretschmer]

so vielleicht?

edb=# create table onyx(id int generated always as identity primary key, start timestamp, dauer interval);
CREATE TABLE
edb=*# insert into onyx (start, dauer) values (now(), '600seconds');
INSERT 0 1
edb=*# commit;
COMMIT
edb=# select * from onyx;
 id |           start           |  dauer   
----+---------------------------+----------
  1 | 19-JUN-21 15:05:30.364877 | 00:10:00
(1 row)

edb=*# commit;
COMMIT

--
-- etwas warten ..
--

edb=# select now() -( start + dauer) from onyx where id = 1;
     ?column?     
------------------
 -00:06:55.463339
(1 row)

[protestix]

Du willst also einen Abwärtszähler im Browser haben?
Dann Javascript.

[Onyx]

Du willst also einen Abwärtszähler im Browser haben?
Dann Javascript.

Ich habe etwas JavaScript probiert, allerdings haut es nicht ganz hin, bzw lässt es sich nicht so einfach umsetzen.

<script type="text/javascript">
            var countdownfunc = function(elem, ende, endstring)
            {
                //Wenn nichts als countdownende angegeben wurde dann wird das hier festgelegt
                if(typeof endstring == "undefined")
                {
                    endstring = "jetzt";
                }

                //Der ausgabestring wird festgelegt
                var output = endstring;

                //Differenz zwischen jetzt und dem ende
                //division durch 1000 weil in JavaScript ein timestamp in Millisekunden angegeben wird
                var timeDiff = (parseInt(ende)) - (parseInt(new Date().getTime() / 1000));

                //Wenn mehr als 0 Sekunden übrig ist dann ...
                if(timeDiff > 0)
                {
                    //... setz den ausgabe string zurück
                    output = '';

                    //Wenn mehr als 1 Stunde (60 sek * 60 Min) übrig ist...
                    if(timeDiff > 3600)
                    {
                        //errechne wie viele stunden übrig sind
                        output += parseInt(timeDiff/3600) + "h ";
                        timeDiff = timeDiff%3600; //Modulo, teile durch eine stunde und speichere den rest
                    }

                    //Wenn mehr als 1 Minute (60 Sek) übrig ist ...
                    if(timeDiff > 60)
                    {
                        //... errechne wieviele minuten es sind ...
                        output += parseInt(timeDiff/60) + "m ";
                        timeDiff = timeDiff%60;//... und merk dir den rest
                    }

                    //jetzt sind nur noch die sekunden übrig
                    output += timeDiff + "s";

                    //rufe diese funktion nach 1000 millisekunden (1 Sek) wieder auf
                    setTimeout(function() {countdownfunc(elem, ende, endstring);},1000);
                }

                //Schreib den ausgabestring in das mitgelieferte element
                elem.innerHTML = output;
            };
        </script> 

Ich habe nämlich eine Datenbankabfrage welche das ganze in einer Tabelle ausgibt. In der Tabelle soll dann zusehen sein, wie lange es noch dauert bis die Aufgabe abgeschlossen ist

$auftrag_sql = "SELECT * FROM c_working WHERE Firma = '$u_ID'";
                                foreach ($mysql->query($auftrag_sql) as $auftrag_out) {
                                $a_ID             = $auftrag_out['ID'];
                                $a_Aufgabe         = $auftrag_out['Aufgabe'];
                                $a_Beschreibung = $auftrag_out['Beschreibung'];
                                $a_Gehalt         = $auftrag_out['Gehalt'];
                                $a_Bonus         = $auftrag_out['Bonus'];
                                $a_Status         = $auftrag_out['Status'];
                                $a_Start         = $auftrag_out['Start'];
                                $a_Dauer         = $auftrag_out['Dauer'];




                                echo '<tr>';
                                echo '<td>'.$a_Aufgabe.'</td>';
                                echo '<td>'.$a_Gehalt.' <i class="fa fa-money"></i> | '.$a_Bonus.' <i class="fa fa-th"></i></td>';
                                echo '<td>ZEIT BIS ZUR FERTIGSTELLUNG</td>';
                                echo '<td>'.$a_Status.'</td>';
                                echo '</tr>';


                                } 

[protestix]

https://www.w3schools.com/howto/tryi...w_js_countdown

[Andreas]

Nimm day.js (library) z.B. mit fromNow(true). Dann biste in 5 Minuten fertig und brauchst dich um kaum was zu kümmern.

[tk1234]

Ich habe etwas JavaScript probiert, allerdings haut es nicht ganz hin, bzw lässt es sich nicht so einfach umsetzen.

Du rufst deine Funktion ja auch nirgendwo auf, da wird natürlich nichts angezeigt.

So Spielereien wie das Herunterzählen der Zeit sollten grundsätzlich optional sein, d.h. die Seite sollte auch ohne Javascript benutzbar sein, in dem Fall auf die Art dass die Dauer bis zur Fertigstellung einfach statisch angezeigt wird wenn kein Javascript verfügbar ist. Um mit Datum/Zeit rechnen zu können, sollte der Startpunkt im TIMESTAMP-Format und die Dauer im DATETIME-Format gespeichert sein. Der End-Zeitpunkt wird dann entweder direkt über die Datenbank oder mit PHP berechnet (Pseudocode!):

$query = "SELECT aufgabe, start, dauer FROM tabelle …";
$daten = holeDaten($query);
foreach($daten as $row){
tr
  td $row.aufgabe
  <td class="countdown" data-ziel="($row.start+$row.dauer)->format(Y-m-d H:i:s)">
    ($row.start+$row.dauer)->diff(now)
  </td>
/tr
}

Das class-Attribut wird später noch wichtig und Attribut die mit data- anfangen können beliebig definiert werden, hier dient es dazu Javascript das Datum mitzuteilen. Der Wert von data-ziel ist (hier) so gedacht dass er über die DateTime-Klasse und deren Methoden berechnet und im Format 2021-06-19 22:22 formatiert wird (bzw. so dass Date.parse() in Javascript etwas damit anfangen kann). Für den Inhalt des td-Elements wird dann noch (ebenfalls über die DateTime-Klasse) die Dauer bis zum Abschluss der Aufgabe berechnet und ausgegeben.

Erst wenn die statische Ausgabe fertig ist, kommt Javascript ins Spiel: du suchst über document.querySelectorAll('.countdown') alle Elemente mit class="countdown", holst die Zeit aus dem data-Attribut und sorgst dafür dass das alles jede Sekunde wiederholt wird:

<script>
let countdownfunc = function (elem, zeit) {
  setTimeout(function () { countdownfunc(elem, zeit); }, 1000);
  elem.innerHTML = diff(now, zeit);
}
document.querySelectorAll('.countdown').forEach((element) => {
  let zeit = element.dataset.ziel;
  countdownfunc(element, zeit);
});
</script>

Das ist alles vielleicht noch nicht ganz ideal benannt und du musst natürlich noch die Funktion diff() bauen die den gewünschten Unterschied zwischen Zielzeit und aktueller Zeit anzeigt aber da Prinzip wird hoffentlich klar (wenn nicht: fragen). Was das dataset macht ist im ersten Link oben erklärt, das forEach wird ebenfalls bei Selfhtml behandelt. Ach, und: das type-Attribut beim script-Element braucht es schon lange nicht mehr.

$auftrag_sql = "SELECT * FROM c_working WHERE Firma = '$u_ID'";
foreach ($mysql->query($auftrag_sql) as $auftrag_out) {
$a_ID = $auftrag_out['ID']; 

Das was du da machst ist zum Teil nur falsch, zum Teil aber auch gefährlich: du behandelst Kontextwechsel nicht, weder den zu SQL (k.a. wo $u_ID herkommt, behandelt werden muss der Wert aber auf jeden Fall) noch weiter unten den zu HTML. Nicht gefährlich aber falsch/unsinnig ist nur die Verwendung von »SELECT *« (immer alle Spalten angeben, auch wenn das alle sind!) und das Umkopieren der Werte aus $auftrag_out in zusätzliche Variablen - von der Nichteinhaltung des EVA-Prinzips ganz zu schweigen.