Contentify: Live Countdown bis Turnierstart/Check-In mit Javascript

[justtam]

Hey,

ich würde gerne in das Featured-Cup Widget einen Countdown einfügen, der in Echtzeit bis zum (beispielsweise) Turnierstart runterzählt. Dies wollte ich mit Javascript in die View des Widgets implementieren, habe aber Probleme damit, dass Javascript das Laravel-Datum nicht akzeptiert und bekomme immer nur "NaN"-Meldungen.
Das ist zwar nicht unbedingt ein Contentify-spezifisches Problem, sondern speziell meiner Unkenntnis im Umgang mit Laravel geschuldet, aber sollte das einfach zu lösen sein wäre das ja vielleicht ein nettes Feature für ein zukünftiges Update.
Keine der Lösungen die Google mir ausspuckte hat geholfen, prinzipiell muss ja nur die "{{ $cup->start_at }}" durch Javascript als Variable akzeptiert werden, also in das entsprechende Format umgewandelt werden.

Wenn es eine (richtig formatierte) php-Variable wäre würde das ganze ja ungefähr so aussehen:

<div id="countdown">
  <p id="countdown"></p>
</div>
<script type="text/javascript">
var countDownDate = new Date(Date.UTC("<?php echo *php-Variable*; ?>"));
  document.getElementById("countdown").innerHTML = countDownDate;
</script>

(Ich hab jetzt den ganzen Countdown-Kram weggelassen, da das Ursprungsproblem ja die Variable ist).
Wie genau baue ich da jetzt die Laravel Variable ein? Kann ich das überhaupt über die View machen?

Vielen Dank im Voraus!

[niclasreich]

Verlinke mal @kamohy, vielleicht kann der uns auch weiterhelfen? :slightly_smiling_face:

[kamohy]

uff Ö.ö also ich bin kein Programmierer, jedoch könntest du folgendes versuchen.
Erzeuge in Cups unter Admin-Backend (du musst das modul dazu passend ausseinander nehmen)
ein neues Feld, das du countdown nennst.
Statt ein Datum nimmst du einfach Stunden/Minuten/Sekunden.
(denk dran dann aber auch eine DB erweiterung zu machen unter Cups)
dann, suchst du die Datei, die als ausgabe auf der webseite zusehen ist. (nicht das design!)
und fügst dort die von dir eingetragen variable als abruf funktion mit deinem JS-Code ein.

DAS IST NUR EINE IDEE, ICH WEISS NICHT OB ES FUNKTIONIERT

[justtam]

@kamohy Danke für die Hilfe, das hätte aber mein Ursprungsproblem nicht behoben, da ich ja daran gescheitert bin die bereits vorhandene Laravel Variable zu nutzen. Einen Countdown bei dem man einfach die Werte eingibt habe ich schon auf anderen Seiten mit javascript hinbekommen, das wäre kein Problem gewesen. Nur dieses händische Eintragen wollte ich ja gerade "ersparen", da die Variable ja eigentlich schon da ist.

Wie dem auch immer sei, ich habe es doch noch hinbekommen. Ich setze den Code hier dran falls es noch andere interessiert, der Thread hier kann dann closed.

Lösung:
Die Laravel Variable in eine php-Variable umwandeln, diese dann in einen Timestamp verwandeln den javascript versteht. Spuckt jetzt nur den reinen Countdown bis zum Start des Cups den man als "Featured" gesetzt hat am Ende des Featured Cup Widgets aus, kann dann natürlich noch mit CSS verschönert werden.

In die Datei Modules/Cups/Resources/Views/widget_featured.blade.php unter den bereits vorhanden Code, aber vor dem letzten /div-Tag:

<?php 
    $time_php = $cup->start_at->format('d.m.Y H:i');
    $time_php_date = strtotime($time_php);
?>

<div>
  <p id="countdown"></p>
</div>

<script type="text/javascript">
 var countDownDate = new Date(<?php echo $time_php_date; ?> * 1000);
 var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  document.getElementById("countdown").innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds;
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "<p>Das Turnier hat bereits begonnen.</p>";
  }
}, 1000);
</script>

[niclasreich]

Du kannst deine Issues in Github selbst schließen, @justtam :slightly_smiling_face:

[chriskonnertz]

Hallo @justtam

$time_php = $cup->start_at->format(trans('app.date_format').' H:i');

Ich frag zur Sicherheit mal nach, bist du sicher, dass du weißt, was das macht? format(trans('app.date_format').' H:i') wandelt den Zeitstempel in das lokale Datumsformat des Clients um. D. h. wenn die Sprache (locale) Deutsch ist, steht dort was anders als wenn sie Englisch ist. Falls das nicht ganz klar war solltest du mal in deinen User-Einstellungen die Sprache ändern und dir den Effekt anschauen.

Nur so zur Info: start_at ist ein Carbon-Objekt. Carbon ist eine Bibliothek die das native PHP-Datums-Objekt erweitert. https://carbon.nesbot.com/docs/ Carbon hat eine Menge Methoden die nützlich sein könnten. Eine Idee wäre weiterhin format() zu benutzen aber mit einem festen Wert statt dem variablen trans('app.date_format'). Was dann wohl wäre: ->format('d.m.Y H:i'). Eventuell ist noch besser gleich mit $cup->start_at->timestamp zu arbeitet statt format() und strtotime().

[justtam]

Guten Morgen Chris,
Wenn ich das Format vorher nicht definiere spuckt er die Stunden und Minuten nicht mit aus, macht also nur einen timestamp bis 00:00 am Tag, ->start_at->timestamp funktionierte beim Testen also nicht.
Deine Format Lösung wäre aber wahrscheinlich eleganter, ich habe in diesem Fall einfach die Variable aus der show-Datei rauskopiert wo das Datum bereits mit Minuten angezeigt wurde und das nicht weiter beachtet. Macht zwar im Endeffekt durch strtotime keinen Unterschied mehr, aber da der User das sowieso nicht zusehen bekommt ist es natürlich quatsch, da hast du Recht.

EDIT:
Habe in meiner Antwort (und in der Datei natürlich auch) ->format() geändert.