Add Summary card showing current date, next prayer & remaining time for next prayer

[fayez-nazzal]

Add Summary Card on top of the table in the parent layout, that includes:

• Day of week & current date
• Next prayer
• Time remaining for next prayer

To be done in future PRs: hijri date, nearest masjid, optional distance sort

Here is how it looks on desktop:

on mobile:

[fayez-nazzal]

Can you please explain how the time remaining is calculated? I suggest writing the masjid name / time in small font below the timer. Also by the way, does it count down on every second? I also suggest to hide the site intro text and make it show when clicking/hovering on an information icon to save space.

It's calculated by reusing the next prayer detection logic, so it takes the last masjid having the next prayer.

It doesn't count every second because it uses the time property of iqama, if we need seconds, maybe we can use seconds_since_midnight and add seconds field to the counter.

About your suggestion, I do recommend putting this into an About page, and for the home page we could add one line, small intro, tobe more informative.

[hammady]

Can you please explain how the time remaining is calculated? I suggest writing the masjid name / time in small font below the timer. Also by the way, does it count down on every second? I also suggest to hide the site intro text and make it show when clicking/hovering on an information icon to save space.

It's calculated by reusing the next prayer detection logic, so it takes the last masjid having the next prayer.

The semantic is then: time remaining for last chance to pray. Don't we need to show the first available masjid (nearest iqama)? How about a range or 2 timers?

It doesn't count every second because it uses the time property of iqama, if we need seconds, maybe we can use seconds_since_midnight and add seconds field to the counter.

I think seconds_since_midnight is more reliable as it is the parsed value from the iqama string. No need to parse it again in the frontend code. It should be ignored if its value is 0 (Not parsed like "5 minutes after athan"). My question is more about the timer being dynamic, does it even get updated on every minute change or it is a one time calculation?

About your suggestion, I do recommend putting this into an About page, and for the home page we could add one line, small intro, tobe more informative.

Agreed.

[fayez-nazzal]

@hammady Sorry for the delay, I removed all parse logic that uses the iqama time, now it uses seconds_since_midnight_utc. And making the timer dynamic would look cool, so I added this feature and added seconds to the timer.

About showing nearest iqama/2 timers, I'm not sure, are we going to show 2 timers with the masjid name below each? My thought was to display the least info to know the remaining time quickly.

[hammady]

@hammady Sorry for the delay, I removed all parse logic that uses the iqama time, now it uses seconds_since_midnight_utc. And making the timer dynamic would look cool, so I added this feature and added seconds to the timer.

Excellent!

About showing nearest iqama/2 timers, I'm not sure, are we going to show 2 timers with the masjid name below each? My thought was to display the least info to know the remaining time quickly.

If we want to show the minimal information, I believe we should show the time to "next available iqama" not the "last chance to pray". This is simply the minimum positive distance between current time in seconds UTC and the iqama times from all masjids.

[fayez-nazzal]

@hammady Sorry for the delay, I removed all parse logic that uses the iqama time, now it uses seconds_since_midnight_utc. And making the timer dynamic would look cool, so I added this feature and added seconds to the timer.

Excellent!

About showing nearest iqama/2 timers, I'm not sure, are we going to show 2 timers with the masjid name below each? My thought was to display the least info to know the remaining time quickly.

If we want to show the minimal information, I believe we should show the time to "next available iqama" not the "last chance to pray". This is simply the minimum positive distance between current time in seconds UTC and the iqama times from all masjids.

My thoughts were to use existing logic for the next prayer, but what you said makes sense. Let me do it

[fayez-nazzal]

@hammady This screenshot at the time of this message, that's your timezone, I'm not sure if anything wrong here

[fayez-nazzal]

@hammady This screenshot at the time of this message, that's your timezone, I'm not sure if anything wrong here

Note it uses an old notiifed.json file, I didn't update it today

[hammady]

@hammady Sorry for the delay, I removed all parse logic that uses the iqama time, now it uses seconds_since_midnight_utc. And making the timer dynamic would look cool, so I added this feature and added seconds to the timer.

Excellent!

About showing nearest iqama/2 timers, I'm not sure, are we going to show 2 timers with the masjid name below each? My thought was to display the least info to know the remaining time quickly.

If we want to show the minimal information, I believe we should show the time to "next available iqama" not the "last chance to pray". This is simply the minimum positive distance between current time in seconds UTC and the iqama times from all masjids.

My thoughts were to use existing logic for the next prayer, but what you said makes sense. Let me do it

I believe both logics should be the same? Next prayer is the one with at least next one iqama available. Summary box: the same next available iqama from the match above.