Countdown realisieren mit Flask und JS

  • Hallo zusammen,

    ich möchte eine kleine Website generieren mit 4 Spalten. (Name, Startzeit, verbleibende Zeit, sonstige Infos)
    Die Startzeit enthält immer nur den Wochentag und Uhrzeit, es handel sich um Ereignisse, die sich wöchentlich wiederholen. Die verbleibende Zeit soll die Differenz der aktuellen Zeit zur nächsten Startzeit, der jeweiligen Zeile, anzeigen. Anfangs hatte ich sofort die Anzeige Invalid Date, mittlerweile werden die Sekunden in allen 3 Zeilen schon angezeigt, allerdings wird dort nichts herunter gezählt. Als Endergebnis wär es schön wenn dort die verbleibenden Tage, Stunden, Minuten und Sekunden angezeigt werden, aktuell wär ich mit sich verringernden Sekunden aber schon zu frieden. Mit JS komm ich nicht wirklich zurecht, deshalb wollte ich dort nicht zu viel erstmal einbauen.


    Bildschirmanzeige:

    Titelüberschrift

    NameStartzeitVerbleibende ZeitSonstige Daten
    Item 2Wednesday 15:0026548Other data 2
    Item 3Friday 16:0030148Other data 3
    Item 1Monday 17:0033748Other data 1
  • Hallo,

    JS ist jetzt auch nicht meine Glanzdisziplin, aber IMHO kann dein Skript so nicht funktionieren. Eine ID in einem HTML Dokument muss eindeutig sein - ist es bei dir aber nicht, du hast in jeder Zeile als ID "remaining time". Was gehen sollte ist über Tabellenzeilen iterieren und sich dann immer den Wert as der X-ten Zelle holen.

    Gruß, noisefloor

  • Das JavaScript hat einen Fehler, es muesste so aussehen:

    Code
        <script>
            // Aktualisierung der verbleibenden Zeit in Echtzeit
            setInterval(function() {
                var remaining_time = document.getElementById("remaining_time");
                remaining_time.innerHTML = remaining_time.innerHTML - 1000;
            }, 1000);
        </script>

    Das zaehlt die erste Zahl herunter (bis unter 0!).

    Zusaetzlich gilt es zu beachten was noisefloor schrieb: ids muessen eindeutig sein.

    - - - - - - - -

    Bravo, das Problem ist vorbildlich dokumentiert! So liebt man es :)

  • Vielen Dank für eure Hilfe, so sieht das aktuelle JS aus:

    und was soll ich sagen, soweit funktioniert es schonmal. Ein Fehler bei dem Mittwoch ist mir noch aufgefallen, da dieser aktuell die geringste Zeit aufweist und da es heute Donnerstag ist müsste dieser den größten Wert aufweisen. Das ist aber dann wieder Pythonseitig und das werde ich (hoffentlich) schon finden :thumbup:.

    Als nächsten Schritt auf der JS Seite wird dann noch sein, dass ich wie eingangs erwähnt die Sekunden aufteilen möchte in Tage, Minuten, Sekunden. Aber da ich das bisher selbst noch gar nicht probiert habe, melde ich mich ggf. einfach nochmals, sollte ich erfolglos bleiben.

    Das die Zahlen unter 0 laufen können ist mir bewusst, könnte sogar dann in weiteren Schritten nützlich werden um die Einträge besonders hervorzuheben.


    Bravo, das Problem ist vorbildlich dokumentiert! So liebt man es :)

    Es wäre ja schlimm wenn ich mich an meinen eigenen Thread "Wie Frage ich nach Hilfe?" nicht halten würde ^^ aber trotzdem danke für das Lob.


    EDIT:

    Das mit loop.index kann ich übrigends bis jetzt gar nicht gezielt auf irgendwelchen Hilfeseiten für JS finden, das hat mir, ich traue es mich gar nicht zu sagen um nicht irgendwelche Diskussionen auszulösen, die KI verraten das so zu lösen.

  • > Das mit loop.index kann ich übrigends bis jetzt gar nicht gezielt auf irgendwelchen Hilfeseiten für JS finden
    Das ist auch kein JavaScript, es gehoert zu JinJa.

    Die Dok dazu: https://jinja.palletsprojects.com/en/3.1.x/templates/#synopsis


    > Als nächsten Schritt auf der JS Seite wird dann noch sein, dass ich wie eingangs erwähnt die Sekunden aufteilen
    > möchte in Tage, Minuten, Sekunden.
    Nicht weiter schwierig, aber dann solltest du die Daten in Sekunden beim Code ablegen. Hin- und herrechnen mit diesem Format ist muehsam.

    Edited once, last by Tell (February 15, 2024 at 10:55 AM).

  • dann liefert dir `target_datetime.weekday()` die Nummer des Tages, beginnend mit Montag=0

    Die Methode verwende ich in Zeile 34. Die Hilfsfunktion existiert, weil die Vorgabe, welcher Wochentag es werden soll aus der Toml Datei ein String ist, der nur den Wochentag enthält aber kein genaues Datum und ohne dieses lässt sich kein Datetimeobjekt mit .strptime() erstellen. Deswegen ging ich den Umweg mit der Hilfsfunktion und aktuell seh ich nicht wie ich diese wegbekommen würde.

    Vielen Dank für den Link, das erklärt es warum ich bei Schleifen bzgl JS nichts finden konnte. Jinja bietet da eine Menge bequemer Funktionen an wie ich hier lese.

    Ja du meinst also die Sekunden in einer Variable wo herunter gezählt wird belassen und nur die Anzeige zu Umrechnung mit seperaten Variablen machen?

  • Hofei Dafür solltest Du mal in das externe `dateutil`-Package schauen. Dein momentanes `one_day` funktioniert so auch nicht weil `timedelta`-Objekte von genau 24 Stunden ausgehen, das stimmt aber ja nicht zwingend für jeden Tag, zum Beispiel bei Winter-/Sommerzeit oder bei Schaltsekunden.

    Edit: Wenn auch zusätzliche JavaScript-Bibliotheken verwendet werden dürfen, verwende ich für Zeit-Kram, inklusive lesbares formatieren von Zeitspannen, ganz gerne moment.js.

    “It is easier to optimize correct code than to correct optimized code.” — Bill Harlan

    Edited once, last by __blackjack__ (February 15, 2024 at 11:43 AM).

  • Testen!

  • Die Änderungen in der index.html brachten keine Änderungen in der Anzeige. Dort werden immer noch die Sekunden heruntergezählt, wenn ich deine Änderungen richtig verstehe sollte es dort dann aber schon mit den Tagen, Stunden und Minuten stehen. Habe es nach den vorgenommenen Änderungen auch in einem anderen Browser getestet um den Cache auszuschließen.

    Das Problem mit dem Mittwoch hab ich auch behoben. Fehler war meine Rückgabe

    Code
        return remaining_time.seconds

    es muss natürlich remaining_time.total_seconds() heißen.


    Das mit dem alle 1000 Millisekunden 1000 abziehen wird ungenau

    Da muss ich dir leider recht geben, hatte vorhin einen Tab für 2 Stunden offen und auf der Pythonkonsole lief auch die Ausgabe der aktuellen Sekunden generiert durch das Pythonprogramm, nach den 2 Stunden war es schon eine Differenz von 200 Sekunden zwischen Browser und Pythonausgabe. Wenn du meinst neu berechnen, meinst du dann in dem Pythonteil und dafür jedes mal die Seite neu laden lassen?

    Sommer/Winterzeit bzw. die Schaltsekunden kann ich verkraften, aber dennoch interessant zu wissen was es dort dann alles auf einmal zu beachten gibt, wenn es genauer werden muss.

  • Die Änderungen in der index.html brachten keine Änderungen in der Anzeige.

    Fehler gefunden, PyCharm hat beim umbennen mitgeholfen und hat die Umbennung der Indexdatei auch im Code durchgeführt, wodurch wieder auf die alte Indexdatei gezeigt worden ist und nicht auf die wie von dir Vorgeschlagen Tell. Sieht zwar noch nicht richtig aus, aber ich hab mal einen Ansatz - Danke :thumbup:
    EDIT: Glaub ich seh die Abweichung, du gehst von Millisekunden aus, sind aber Sekunden...

    Titelüberschrift

    NameStartzeitVerbleibende ZeitSonstige Daten
    Item 3Friday 16:000h 1m 30sOther data 3
    Item 1Monday 17:000h 5m 53sOther data 1
    Item 2Wednesday 15:000h 8m 38sOther data 2


    __blackjack__ ja, jetzt wenn ich das so lese hört sich das ziemlich nachteilig an. Allerdings bin ich auch gerade am Überlegen ob ich das ganze so lasse, denn der Countdown soll ja nicht ständig live beobachtet werden, sondern nur zum mal schnell nachschauen, was steht wo wann am nächsten an. Da ich mit JS nicht gern arbeite könnte ich höchstens wirklich noch mit einem 1-5 Min. Refresh der Seite leben, das hab ich auch gerade getestet wie ich das umsetzen kann, das würd funktionieren. Auch wenn der Server das dann neu rechnen muss und es eigentlich falsch ist.


    EDIT EDIT:

    Sieht gut aus :)

    NameStartzeitVerbleibende ZeitSonstige Daten
    Item 3Friday 16:001d 1h 38m 49sOther data 3
    Item 1Monday 17:004d 2h 38m 49sOther data 1
    Item 2Wednesday 15:006d 0h 38m 49sOther data 2

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!