Merge pull request #12 from altf4arnold/css-anmiation
Carousel for when there are multiple flight numbers
This commit is contained in:
GitHub
commit
63263249b0
18
app.py
18
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'}
|
||||
|
|
|
|||
24
static/animation.css
Normal file
24
static/animation.css
Normal file
|
|
@ -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 */
|
||||
}
|
||||
47
static/scroll.js
Normal file
47
static/scroll.js
Normal file
|
|
@ -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);
|
||||
|
|
@ -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) %}
|
||||
{% if i%2 == 0 %}
|
||||
<tr class="bg-white border-b">
|
||||
{% else %}
|
||||
<tr class="bg-gray-100 border-b">
|
||||
{% for i in range(0,len) %}
|
||||
{% if i%2 == 0 %}
|
||||
<tr class="bg-white border-b">
|
||||
{% else %}
|
||||
<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">{{ 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"] %}
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<div class="carousel-container carousel{{ i }}">
|
||||
<ul class="carousel-list" id="carouselList{{ i }}">
|
||||
{% for ident in flight[i]["ident"] %}
|
||||
<li class="carousel-item">{{ ident }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</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 %}
|
||||
{% endif %}
|
||||
</td>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
</td>
|
||||
{% if flight[i]["status"] != "Scheduled" %}
|
||||
{% if flight[i]["cancelled"] %}
|
||||
<td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
|
||||
{{ flight[i]["status"] }}
|
||||
{% elif flight[i]["blocked"] %}
|
||||
<td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
|
||||
{{ flight[i]["status"] }}
|
||||
{% else %}
|
||||
<td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
|
||||
{{ flight[i]["status"] }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
|
||||
{% endif %}
|
||||
</td>
|
||||
{% if flight[i]["cancelled"] %}
|
||||
<td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
|
||||
{{ flight[i]["status"] }}
|
||||
{% elif flight[i]["blocked"] %}
|
||||
<td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
|
||||
{{ flight[i]["status"] }}
|
||||
{% else %}
|
||||
<td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
|
||||
{{ flight[i]["status"] }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script src="/static/scroll.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue