Add race countdown

formula10/__init__.py

@@ -4,8 +4,11 @@ from flask_sqlalchemy import SQLAlchemy
 app: Flask = Flask(__name__)
 app.config['SQLALCHEMY_DATABASE_URI'] = "sqlite:///formula10.db"
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+# Session cookie is used to propagate message to error page
 app.config['SESSION_TYPE'] = 'memcached'
 app.config['SECRET_KEY'] = 'ich stinke nach maggi'
+
 app.url_map.strict_slashes = False
 
 db: SQLAlchemy = SQLAlchemy()
@@ -22,17 +25,9 @@ import formula10.controller.error_controller
 # TODO
 # General
 
-# Date stuff:
-# - Date lock race guess entering + race result entering + season guess entering (frontend + backend)
-# - Some info popup that can be populated
 # - Show timer until next race?
 
-# - Choose "place to guess" late before the race? Make a page for this?
-# - Store currently active user inside cookie
-
-# - Make user order changeable using drag'n'drop?
 # - Show place when entering race result (would require updating the drag'n'drop code...)
-# - Show cards of previous race results, like with season guesses?
 # - Don't write full 2024 date, just 24 or leave out completely, to make column smaller
 
 # Statistics
@@ -40,4 +35,8 @@ import formula10.controller.error_controller
 # - Auto calculate points
 # - Order user table by points + display points somewhere
 # - Highlight currently correct values for some season guesses (e.g. current most dnfs)
-# - Generate static diagram using chart.js + templating the js (funny yikes)
+# - Generate static diagram using chart.js + templating the js (funny yikes)
+
+# Possible but probably not
+# - Show cards of previous race results, like with season guesses?
+# - Make user order changeable using drag'n'drop?

formula10/static/script/countdown.js

@@ -0,0 +1,31 @@
+// Set the date we're counting down to
+var raceTime = document.getElementById("race_date").innerHTML
+console.log(raceTime)
+var countDownDate = new Date(raceTime).getTime();
+console.log(countDownDate)
+
+// Update the countdown every 1 second
+var x = setInterval(function() {
+
+  // Get today's date and time
+  var now = new Date().getTime();
+
+  // Find the distance between now and the countdown date
+  var distance = countDownDate - now;
+
+  // Time calculations for days, hours, minutes and seconds
+  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);
+
+  // Display the result in the element with id="demo"
+  document.getElementById("race_date_countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
+
+  // If the countdown is finished, write some text
+  if (distance < 0) {
+    clearInterval(x);
+    document.getElementById("race_date_countdown").innerHTML = "GO GO GO";
+  }
+
+}, 1000);

formula10/templates/race.jinja

@@ -4,6 +4,10 @@
 
 {% set active_page = "/race/" ~ model.active_user_name_sanitized_or_everyone() %}
 
+{% block head_extra %}
+    <script src="../static/script/countdown.js" defer></script>
+{% endblock head_extra %}
+
 {% block navbar_center %}
     {{ active_user_dropdown(page='race') }}
 {% endblock navbar_center %}
@@ -77,7 +81,12 @@
                     <td>&nbsp;</td>
                 {% endif %}
 
-                <td>&nbsp;</td>
+                {# Race countdown #}
+                <span id="race_date" hidden="hidden">{{ model.current_race.date.strftime("%Y-%m-%dT%H:%M") }}</span>
+                <td class="text-center text-nowrap align-middle">
+                    <span class="fw-bold">Race starts in:</span><br>
+                    <span id="race_date_countdown"></span>
+                </td>
             </tr>
         {% endif %}
 
@@ -87,7 +96,8 @@
                 <td class="text-nowrap">
                     <span class="fw-bold">{{ model.current_race.number }}:</span> {{ model.current_race.name }}<br>
                     <small><span class="fw-bold">Guess:</span> P{{ model.current_race.place_to_guess }}</small><br>
-                    <small><span class="fw-bold">Date:</span> {{ model.current_race.date.strftime("%d.%m.%Y %H:%M") }}</small>
+                    <small><span class="fw-bold">Date:</span> {{ model.current_race.date.strftime("%d.%m.%Y %H:%M") }}
+                    </small>
                 </td>
 
                 <td>
@@ -111,12 +121,14 @@
                         {# Driver DNF Select #}
                         {{ driver_select_with_preselect(driver_match=user_guess.dnf_guess, name="dnfselect", label="DNF:", include_none=true) }}
 
-                        <input type="submit" class="btn btn-danger mt-2 w-100" value="Save" {% if model.race_guess_open(model.current_race) == false %}disabled="disabled"{% endif %}>
+                        <input type="submit" class="btn btn-danger mt-2 w-100" value="Save"
+                               {% if model.race_guess_open(model.current_race) == false %}disabled="disabled"{% endif %}>
                     </form>
 
                     {# Delete guess #}
                     <form action="{{ action_delete_href }}" method="post">
-                        <input type="submit" class="btn btn-dark mt-2 w-100" value="Delete" {% if model.race_guess_open(model.current_race) == false %}disabled{% endif %}>
+                        <input type="submit" class="btn btn-dark mt-2 w-100" value="Delete"
+                               {% if model.race_guess_open(model.current_race) == false %}disabled{% endif %}>
                     </form>
                 </td>