animation

app.py

@@ -16,12 +16,12 @@ def hello_world():
     rawdata = datapull.grabber()
     airport = {"name": "", "icao": "", "iata": ""}
     for flight in rawdata:
-        # Source Airport naming
+        # Source Airport naming :
         airport["name"] = flight["origin"]["name"]
         airport["icao"] = flight["origin"]["code_icao"]
         airport["iata"] = flight["origin"]["code_iata"]
 
-        # Converting departures time from UTC to local time
+        # Converting departures time from UTC to local time :
         origintimezone = flight["origin"]["timezone"]
         from_zone = tz.gettz('UTC')
         to_zone = tz.gettz(origintimezone)
@@ -29,7 +29,13 @@ def hello_world():
         utctime = utctime.replace(tzinfo=from_zone)
         flight["scheduled_off"] = utctime.astimezone(to_zone).strftime(localformat)
 
-        # Calculating Delays in human readable ways
+        # Adding the secondary flight numbers :
+        flightnr = flight["ident"]
+        flight["ident"] = []
+        flight["ident"].append(flightnr)
+        for otherrefs in flight["codeshares"]:
+            flight["ident"].append(otherrefs)
+        # Calculating Delays in human readable ways :
         negative = False
         delay = flight["departure_delay"]
         if delay != 0:
@@ -45,9 +51,3 @@ def hello_world():
                 if negative:
                     flight["departure_delay"] = ("-" + str(flight["departure_delay"]))
     return render_template('screen.html', len=len(rawdata), airport=airport, flight=rawdata)
-
-
-@app.route("/style.css")
-def style():
-    with open("static/style.css", "r") as f:
-        return f.read(), 200, {'Content-Type': 'text/css; charset=utf-8'}

static/animation.css

@@ -0,0 +1,115 @@
+.content {
+  overflow:hidden;
+
+  &__container {
+    overflow: hidden;
+
+    &:before {
+      content: '[';
+      left: 0;
+    }
+
+    &:after {
+      content: ']';
+      position: absolute;
+      right: 0;
+    }
+
+    &:after, &:before {
+      top: 0;
+      -webkit-animation-name: opacity;
+      -webkit-animation-duration: 2s;
+      -webkit-animation-iteration-count: infinite;
+      animation-name: opacity;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+    }
+    &__list {
+      -webkit-animation-name: change;
+      -webkit-animation-duration: 10s;
+      -webkit-animation-iteration-count: infinite;
+      animation-name: change;
+      animation-duration: 10s;
+      animation-iteration-count: infinite;
+
+      &__item {
+        line-height:40px;
+        margin:0;
+      }
+    }
+  }
+}
+
+@-webkit-keyframes opacity {
+  0%, 100% {opacity:0;}
+  50% {opacity:1;}
+}
+
+@-webkit-keyframes change {
+  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
+  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
+  33.32%,45.98% {transform:translate3d(0,-50%,0);}
+  49.98%,62.64% {transform:translate3d(0,-75%,0);}
+  66.64%,79.3% {transform:translate3d(0,-50%,0);}
+  83.3%,95.96% {transform:translate3d(0,-25%,0);}
+}
+
+@-o-keyframes opacity {
+  0%, 100% {opacity:0;}
+  50% {opacity:1;}
+}
+
+@-o-keyframes change {
+  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
+  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
+  33.32%,45.98% {transform:translate3d(0,-50%,0);}
+  49.98%,62.64% {transform:translate3d(0,-75%,0);}
+  66.64%,79.3% {transform:translate3d(0,-50%,0);}
+  83.3%,95.96% {transform:translate3d(0,-25%,0);}
+}
+
+@-moz-keyframes opacity {
+  0%, 100% {opacity:0;}
+  50% {opacity:1;}
+}
+
+@-moz-keyframes change {
+  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
+  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
+  33.32%,45.98% {transform:translate3d(0,-50%,0);}
+  49.98%,62.64% {transform:translate3d(0,-75%,0);}
+  66.64%,79.3% {transform:translate3d(0,-50%,0);}
+  83.3%,95.96% {transform:translate3d(0,-25%,0);}
+}
+
+@keyframes opacity {
+  0%, 100% {opacity:0;}
+  50% {opacity:1;}
+}
+
+@keyframes change {
+  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
+  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
+  33.32%,45.98% {transform:translate3d(0,-50%,0);}
+  49.98%,62.64% {transform:translate3d(0,-75%,0);}
+  66.64%,79.3% {transform:translate3d(0,-50%,0);}
+  83.3%,95.96% {transform:translate3d(0,-25%,0);}
+}
+
+// 6 is the number of animation.
+// Here, there are 4 lines :
+
+// 1 to 2
+// 2 to 3
+// 3 to 4
+// 4 to 3
+// 3 to 2
+// 2 to 1
+
+// 6x + 6y = 100 (100% duration)
+
+// HERE :
+// y = 4 -> Animation between two lines
+// x = 12.66 -> Time spent on a line
+
+// You can define a value and calculate the other if you want change speed or the number of lines

templates/screen.html

@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/animation.css">
     <title>{{ airport["icao"] }} Departure Schedule</title>
 </head>
 <body>
@@ -34,43 +35,53 @@
         </tr>
         </thead>
         <tbody>
-        {% for i  in range(0,len) %}
+        {% for i in range(0,len) %}
-            {% if i%2 == 0 %}
+        {% if i%2 == 0 %}
-                <tr class="bg-white border-b">
+        <tr class="bg-white border-b">
-                    {% else %}
+            {% else %}
-                <tr class="bg-gray-100 border-b">
+        <tr class="bg-gray-100 border-b">
             {% endif %}
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ flight[i]["ident"] }}</td>
+            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ flight[i]["scheduled_off"] }}</td>
+                <div class="content">
-        <td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">{% if flight[i]["departure_delay"] %}
+                    <div class="content__container">
-            {{ flight[i]["departure_delay"] }}
+                        <ul class="content__container__list">
-        {% else %}
+                            {% for ident in flight[i]["ident"] %}
-        {% endif %}
+                            <li class="content__container__list__item">{{ ident }}</li>
-        </td>
+                            {% endfor %}
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ flight[i]["operator"] }}</td>
+                        </ul>
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap overflow-scroll scroll-smooth">
+                    </div>
-            {% if flight[i]["destination"]["name"] %}
+                </div>
+            </td>
+            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ flight[i]["scheduled_off"] }}</td>
+            <td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">{% if flight[i]["departure_delay"] %}
+                {{ flight[i]["departure_delay"] }}
+                {% else %}
+                {% endif %}
+            </td>
+            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ flight[i]["operator"] }}</td>
+            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap overflow-scroll scroll-smooth">
+                {% if flight[i]["destination"]["name"] %}
                 {{ flight[i]["destination"]["name"] }}
                 <span class="text-blue-500">{{ flight[i]["destination"]["code_icao"] }}</span> /
                 <span class="text-green-600">{{ flight[i]["destination"]["code_iata"] }}</span>
-            {% else %}
+                {% else %}
-            {% endif %}
+                {% endif %}
-        </td>
+            </td>
             {% if flight[i]["status"] != "Scheduled" %}
-                {% if flight[i]["cancelled"] %}
+            {% if flight[i]["cancelled"] %}
-                    <td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
+            <td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
-                    {{ flight[i]["status"] }}
+                {{ flight[i]["status"] }}
-                    {% elif flight[i]["blocked"] %}
+                {% elif flight[i]["blocked"] %}
-                    <td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
+            <td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
-                    {{ flight[i]["status"] }}
+                {{ flight[i]["status"] }}
-                    {% else %}
+                {% else %}
-                    <td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
+            <td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
-                    {{ flight[i]["status"] }}
+                {{ flight[i]["status"] }}
-                    {% endif %}
+                {% endif %}
-            {% else %}
+                {% else %}
-                <td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
+            <td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
-            {% endif %}
+                {% endif %}
-        </td>
+            </td>
         </tr>
         {% endfor %}
         </tbody>