Add trip counter to page and config file

app.py

@@ -15,6 +15,11 @@ account_url = yaml_data['accounts']['account_url']
 
 description = yaml_data['description']
 
+countdown_data = None
+if yaml_data['countdown']['active'] == True:
+    countdown_data = yaml_data['countdown']
+    print(countdown_data)
+
 apps = []
 for itm in yaml_data['apps'].items():
     apps.append(itm[1])
@@ -22,6 +27,8 @@ for itm in yaml_data['apps'].items():
 
 @app.route('/')
 def index():
+    if countdown_data != None:
+        return render_template('index.j2', apps = apps, search = search, account_url = account_url, description = description, countdown = countdown_data)
     return render_template('index.j2', apps = apps, search = search, account_url = account_url, description = description)
 
 

config/config.yaml

@@ -7,6 +7,11 @@ accounts:
 
 description: "It turns out Technical Incompetence's amazingness is just too great for this lame internet - we need a new one to maximize our full potential. Welcome to the Technical Incompetence internet. Population - US."
 
+countdown:
+  active: True
+  name: "The End of Drunktrips: You Can (Not) Continue"
+  timestamp: "June 26 2020 11:00:00 GMT-0400"
+
 apps:
   chat:
     name: "Rocket Chat"

static/clock.css

@@ -0,0 +1,34 @@
+@font-face{
+    font-family:'digital-clock-font';
+    src: url('/static/fonts/digital-7 (mono).ttf');
+}
+
+#clockdiv > div{
+    padding: 6px;
+    border-radius: 3px;
+    /* background: #00BF96; */
+    display: inline-block;
+}
+
+#clockdiv div > span{
+    padding: 8px;
+    border-radius: 3px;
+    /* background: #00816A; */
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    font-family: digital-clock-font;
+    font-size: 32px;
+    vertical-align: middle;
+}
+
+@media (min-width: 350px) {
+    #clockdiv div > span{
+        font-size: 40px;
+    }
+}
+
+#trip-name {
+    font-size: 16px;
+    text-align: center;
+}

static/clock.js

@@ -0,0 +1,48 @@
+function getTimeRemaining(endtime){
+    const total = Date.parse(endtime) - Date.parse(new Date());
+    const seconds = Math.floor( (total/1000) % 60 );
+    const minutes = Math.floor( (total/1000/60) % 60 );
+    const hours = Math.floor( (total/(1000*60*60)) % 24 );
+    const days = Math.floor( total/(1000*60*60*24) );
+
+    return {
+        total,
+        days,
+        hours,
+        minutes,
+        seconds
+    };
+}
+
+function initializeClock(id, endtime) {
+    const clock = document.getElementById(id);
+
+    const daysSpan = clock.querySelector('.days');
+    const hoursSpan = clock.querySelector('.hours');
+    const minutesSpan = clock.querySelector('.minutes');
+    const secondsSpan = clock.querySelector('.seconds');
+
+    function updateClock() {
+        const t = getTimeRemaining(endtime);
+
+        if (t.days < 0) {
+            clearInterval(timeinterval);
+            $('#clock-card').hide();
+        }
+
+        daysSpan.innerHTML = t.days;
+        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
+        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+
+        if (t.total <= 0) {
+            clearInterval(timeinterval);
+        }
+    }
+
+    updateClock(); // run function once at first to avoid delay
+    var timeinterval = setInterval(updateClock, 1000);
+}
+
+initializeClock('clockdiv', deadline);
+$('#trip-name').text(tripName);

templates/card.j2

@@ -1,4 +1,4 @@
-<div class="col-xs-12 col-sm-6 col-md-4 mb-4">
+<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 mb-4">
     <div class="card" onclick="goToLink('{{ app['link'] }}');">
         <div class="card-body">
             {% if app['image'] is defined %}

templates/countdown.j2

@@ -0,0 +1,23 @@
+<div id="clock-card" class="col-xs-12 col-sm-8 col-md-6 mb-6" style="margin: auto;">
+    <div class="card">
+        <div class="card-body" style="margin: auto; padding-left: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.5rem; text-align: center;">
+            <div id="clockdiv" style="margin: auto;">
+                <div>
+                    <span class="days"></span>
+                </div>
+                <div>
+                    <span class="hours"></span>
+                </div>
+                <div>
+                    <span class="minutes"></span>
+                </div>
+                <div>
+                    <span class="seconds"></span>
+                </div>
+            </div>
+            <div id="trip-name">
+            </div>
+        </div>
+    </div>
+</div>
+<br>

templates/index.j2

@@ -4,6 +4,9 @@
 {% block styles %}
 {{super()}}
 <link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
+{% if countdown is defined %}
+    <link rel="stylesheet" href="{{url_for('.static', filename='clock.css')}}">
+{% endif %}
 {% endblock %}
 
 {% block navbar %}
@@ -25,6 +28,9 @@
         </div>
         <br><br>
     {% endif %}
+    {% if countdown is defined %}
+        {% include "countdown.j2" %}
+    {% endif %}
     <p>{{ description }}</p>
         <div class="row">
             {% for app in apps %}
@@ -36,6 +42,13 @@
 
 {% block scripts %}
 {{ super () }}
+{% if countdown is defined %}
+    <script>
+        const deadline = '{{ countdown['timestamp'] }}';
+        const tripName = '{{ countdown['name'] }}';
+    </script>
+    <script src="{{url_for('.static', filename='clock.js')}}"></script>
+{% endif %}
 <script>
 $("#search-box").keyup(function(event) {
     if (event.keyCode === 13) {