Merge pull request #12 from altf4arnold/css-anmiation

Carousel for when there are multiple flight numbers

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,24 @@
+/* Style for the container of the carousel */
+.carousel-container {
+    width: 70px;
+    height: 15px;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Style for the list inside the carousel */
+.carousel-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 0;
+    transition: top 1s ease-in-out;
+}
+
+/* Style for individual items in the carousel */
+.carousel-item {
+    height: 15px; /* Adjust height as needed */
+    line-height: 15px; /* Adjust line-height to vertically center text */
+    /*border-bottom: 1px solid #ccc; /* Optional: Add border between items */
+}

static/scroll.js

@@ -0,0 +1,47 @@
+// JavaScript for autoscrolling all carousels simultaneously
+const carouselContainers = document.querySelectorAll('.carousel-container');
+const carousels = [];
+
+carouselContainers.forEach(container => {
+  const carouselList = container.querySelector('.carousel-list');
+  const items = carouselList.getElementsByClassName('carousel-item');
+  const itemHeight = items[0].offsetHeight;
+  const totalItems = items.length;
+  let currentIndex = 0;
+  let isResetting = false;
+
+  // Push each carousel object into an array
+  carousels.push({
+    carouselList,
+    itemHeight,
+    totalItems,
+    currentIndex,
+    isResetting
+  });
+});
+
+function scrollAllCarousels() {
+  carousels.forEach(carousel => {
+    carousel.currentIndex++;
+    if (carousel.currentIndex === carousel.totalItems) {
+      carousel.isResetting = true;
+      carousel.currentIndex = 0;
+      carousel.carouselList.style.transition = 'top 0.5s ease-in-out'; // Enable transition for smooth scrolling
+      carousel.carouselList.style.top = `${-carousel.itemHeight}px`; // Start scroll animation
+    }
+    if (carousel.isResetting && carousel.currentIndex === 0) {
+      // If resetting and back to the top, reset the top position instantly without animation
+      carousel.isResetting = false;
+      carousel.carouselList.style.transition = 'none'; // Disable transition for instant reset
+      carousel.carouselList.style.top = '0px'; // Reset to the top instantly
+      setTimeout(() => {
+        carousel.carouselList.style.transition = ''; // Re-enable transition
+      }, 50); // Add a slight delay before re-enabling transition to ensure it takes effect
+    }
+    const displacement = -carousel.currentIndex * carousel.itemHeight;
+    carousel.carouselList.style.top = `${displacement}px`;
+  });
+}
+
+// Set interval for autoscrolling all carousels simultaneously
+setInterval(scrollAllCarousels, 3000);

templates/screen.html

@@ -2,7 +2,9 @@
 <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">
+    <meta http-equiv="refresh" content="30">
     <title>{{ airport["icao"] }} Departure Schedule</title>
 </head>
 <body>
@@ -34,47 +36,56 @@
         </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="carousel-container carousel{{ i }}">
-        <td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">{% if flight[i]["departure_delay"] %}
+                    <ul class="carousel-list" id="carouselList{{ i }}">
-            {{ flight[i]["departure_delay"] }}
+                        {% for ident in flight[i]["ident"] %}
-        {% else %}
+                        <li class="carousel-item">{{ ident }}</li>
-        {% endif %}
+                        {% endfor %}
-        </td>
+                    </ul>
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ flight[i]["operator"] }}</td>
+                </div>
-        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap overflow-scroll scroll-smooth">
+            </td>
-            {% if flight[i]["destination"]["name"] %}
+            <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>
     </table>
 </div>
+<script src="/static/scroll.js"></script>
 </body>
 </html>