-
Notifications
You must be signed in to change notification settings - Fork 21
Feat/config widgets and refactoring #45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
9f02917
eb023b0
53cd937
6205732
fdec321
7f0a3b9
dc28c88
c72493b
87a9a66
e5cea63
20791e2
9ba7f62
b90a859
8999b49
2d59f59
fe0b57e
0a0ff95
c611a9b
f7dd13d
63c2b8a
08c0e64
7510cdb
744dc93
2e774e9
204cdc8
713eaa0
ce1832c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -44,13 +44,30 @@ All of the code sits here: | |||||
|
|
||||||
| ### Mosque views | ||||||
|
|
||||||
| <img src="./public/demo-mosque-view-1.png" /> | ||||||
| <img src="./public/screenshots/demo-mosque-view-1.png" /> | ||||||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add alt text to images for accessibility. All image tags are missing alt text, which impacts accessibility for screen reader users and provides better context when images fail to load. 🔎 Proposed fix with descriptive alt text-<img src="./public/screenshots/demo-mosque-view-1.png" />
+<img src="./public/screenshots/demo-mosque-view-1.png" alt="Mosque prayer display screen showing today's prayer times" />
-<img src="./public/screenshots/demo-mosque-view-2.png" />
+<img src="./public/screenshots/demo-mosque-view-2.png" alt="Mosque prayer display screen showing upcoming prayer times" />
-<img src="./public/screenshots/demo-mosque-view-3.png" />
+<img src="./public/screenshots/demo-mosque-view-3.png" alt="Mosque prayer display screen with tomorrow prayer time hidden" />
-<img src="./public/screenshots/demo-mosque-announcement-car.png" />
+<img src="./public/screenshots/demo-mosque-announcement-car.png" alt="Mosque screen displaying car registration announcement" />
-<img src="./public/screenshots/demo-mosque-calendar-prints-1.png" />
+<img src="./public/screenshots/demo-mosque-calendar-prints-1.png" alt="Printable prayer calendar view 1" />
-<img src="./public/screenshots/demo-mosque-calendar-prints-2.png" />
+<img src="./public/screenshots/demo-mosque-calendar-prints-2.png" alt="Printable prayer calendar view 2" />
-<img src="./public/screenshots/demo-mobile-view.png" width="500px" />
+<img src="./public/screenshots/demo-mobile-view.png" width="500px" alt="Mobile progressive web app view of prayer times" />
-<img src="./public/screenshots/demo-admin-view.png/"/>
+<img src="./public/screenshots/demo-admin-view.png" alt="Admin interface for managing mosque screen settings" />Also applies to: 49-49, 53-53, 57-57, 61-62, 66-66, 70-70 🧰 Tools🪛 markdownlint-cli2 (0.18.1)47-47: Images should have alternate text (alt text) (MD045, no-alt-text) 🤖 Prompt for AI Agents |
||||||
|
|
||||||
| <img src="./public/demo-mosque-view-2.png" /> | ||||||
| <img src="./public/screenshots/demo-mosque-view-2.png" /> | ||||||
|
|
||||||
| ### Hide Tomorrow Prayer Time | ||||||
|
|
||||||
| <img src="./public/screenshots/demo-mosque-view-3.png" /> | ||||||
|
|
||||||
| ### Announcements | ||||||
|
|
||||||
| <img src="./public/screenshots/demo-mosque-announcement-car.png" /> | ||||||
|
|
||||||
| ### Print Calendars | ||||||
|
|
||||||
| <img src="./public/screenshots/demo-mosque-calendar-prints-1.png" /> | ||||||
| <img src="./public/screenshots/demo-mosque-calendar-prints-2.png" /> | ||||||
|
|
||||||
| ### Mobile app | ||||||
|
|
||||||
| <img src="./public/demo-mobile-view.png" width="500px" /> | ||||||
| <img src="./public/screenshots/demo-mobile-view.png" width="500px" /> | ||||||
|
|
||||||
| ### Admin Page | ||||||
|
|
||||||
| <img src="./public/screenshots/demo-admin-view.png/"/> | ||||||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix malformed image tag. There's an extra 🔎 Proposed fix-<img src="./public/screenshots/demo-admin-view.png/"/>
+<img src="./public/screenshots/demo-admin-view.png" />📝 Committable suggestion
Suggested change
🧰 Tools🪛 markdownlint-cli2 (0.18.1)70-70: Images should have alternate text (alt text) (MD045, no-alt-text) 🤖 Prompt for AI Agents |
||||||
|
|
||||||
| ## How to get set up as a Mosque | ||||||
|
|
||||||
|
|
@@ -121,7 +138,7 @@ The Admin interface will allow you to manage the screen from your phone these in | |||||
| ### Prerequisites | ||||||
|
|
||||||
| - Google Account | ||||||
| - Google Cloud Project (Optional for Admin interface) | ||||||
| - Google Cloud Project | ||||||
|
|
||||||
| ### Step 1: Setup Google Cloud project | ||||||
|
|
||||||
|
|
@@ -185,6 +202,7 @@ If you want to update your domain, you can do so by following the Vercel documen | |||||
| | THEME_COLOR_ON_PRIMARY | #FFFFFF | #FFFFFF | The text color to be used when the background color is primary | | ||||||
| | THEME_COLOR_ON_PRIMARY_ALT | #FFFFFF | #FFFFFF | The text color to be used when the background color is primary alternative | | ||||||
| | THEME_COLOR_HIGHLIGHT | #10b981 | #10b981 | The color used to highlight upcoming prayer | | ||||||
| | LOCALE | en | en | The date/time format for locale | | ||||||
| | ADMIN_GOOGLE_SA_PRIVATE_KEY | "-----BEGIN PRIVATE KEY-----\n******\n-----END PRIVATE KEY-----\n" | | Required as part of Admin interface to interact with your google sheets | | ||||||
| | ADMIN_GOOGLE_SA_EMAIL | XXXX@XXXX-XXXX.iam.gserviceaccount.com | | Required as part of Admin interface to interact with your google sheets | | ||||||
| | AUTH_USERNAME | myuser | myuser | Required as part of Admin interface to login to admin page | | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| import { DailyPrayerTime } from "@/types/DailyPrayerTimeType" | ||
| import "../../widget.css" | ||
| import { getNextPrayer } from "@/services/PrayerTimeService" | ||
| import { | ||
| getPrayerTimesForToday, | ||
| getPrayerTimesForTomorrow, | ||
| } from "@/services/MosqueDataService" | ||
| import { cn } from "@/lib/utils" | ||
| import { | ||
| dtHijriNow, | ||
| dtNowFormatFull, | ||
| dtNowHijriFormatFull, | ||
| dtNowLocale, | ||
| dtFormatTimeToCustom, | ||
| } from "@/lib/datetimeUtils" | ||
|
|
||
| type Props = { | ||
| timeFormat?: "h:mm" | "h:mm A" | "HH:mm" | ||
| showSunrise?: boolean | ||
| showDate?: boolean | ||
| showHijri?: boolean | ||
| } | ||
|
|
||
| export async function TodayPrayerTime({ | ||
| timeFormat = "h:mm", | ||
| showSunrise = false, | ||
| showDate = false, | ||
| showHijri = false, | ||
| }: Props) { | ||
| const convertTime = (time: string) => | ||
| dtFormatTimeToCustom(time, timeFormat) | ||
|
|
||
| const today: DailyPrayerTime = await getPrayerTimesForToday() | ||
| const tomorrow: DailyPrayerTime = await getPrayerTimesForTomorrow() | ||
| let currentDailyPrayerTimes = today | ||
| let englishDate = dtNowFormatFull() | ||
| let hijriDate = dtNowHijriFormatFull() | ||
|
|
||
| let nextPrayerTime = getNextPrayer(today) | ||
| if (!nextPrayerTime.today) { | ||
| nextPrayerTime = { | ||
| today: true, | ||
| prayerIndex: 0 | ||
| } | ||
| currentDailyPrayerTimes = tomorrow | ||
| englishDate = dtNowLocale().add(1, "day").format("D MMMM YYYY") | ||
| hijriDate = dtHijriNow().add(1, "day").format("iD iMMMM iYYYY") | ||
| } | ||
|
|
||
| let currentSalahTimes: Array<{ | ||
| label: string | ||
| start: string | ||
| congregation: string | null | ||
| prayerIndex: number | ||
| }> = [ | ||
| { | ||
| label: "Fajr", | ||
| start: currentDailyPrayerTimes.fajr.start, | ||
| congregation: currentDailyPrayerTimes.fajr.congregation_start, | ||
| prayerIndex: 0, | ||
| }, | ||
| { | ||
| label: "Zuhr", | ||
| start: currentDailyPrayerTimes.zuhr.start, | ||
| congregation: currentDailyPrayerTimes.zuhr.congregation_start, | ||
| prayerIndex: 1, | ||
| }, | ||
| { | ||
| label: "Asr", | ||
| start: currentDailyPrayerTimes.asr.start, | ||
| congregation: currentDailyPrayerTimes.asr.congregation_start, | ||
| prayerIndex: 2, | ||
| }, | ||
| { | ||
| label: "Maghrib", | ||
| start: currentDailyPrayerTimes.maghrib.start, | ||
| congregation: currentDailyPrayerTimes.maghrib.congregation_start, | ||
| prayerIndex: 3, | ||
| }, | ||
| { | ||
| label: "Isha", | ||
| start: currentDailyPrayerTimes.isha.start, | ||
| congregation: currentDailyPrayerTimes.isha.congregation_start, | ||
| prayerIndex: 4, | ||
| }, | ||
| ] | ||
|
|
||
| if (showSunrise) { | ||
| currentSalahTimes = [ | ||
| ...currentSalahTimes.slice(0, 1), | ||
| { | ||
| label: "Sunrise", | ||
| start: currentDailyPrayerTimes.sunrise_start, | ||
| congregation: null, | ||
| prayerIndex: -1, | ||
| }, | ||
| ...currentSalahTimes.slice(1), | ||
| ] | ||
| } | ||
|
|
||
| return ( | ||
| <div className="PrayerTimeWidgetWrapper"> | ||
| <table className="w-full ml-0 text-center"> | ||
| <thead> | ||
| {(showDate || showHijri) && ( | ||
| <tr> | ||
| <th className={"pr-6 text-right text-gray-300"}></th> | ||
| <th | ||
| colSpan={currentSalahTimes?.length} | ||
| className={"text-gray-400 font-normal text-center text-md"} | ||
| > | ||
| {[showDate && englishDate, showHijri && hijriDate] | ||
| .filter(Boolean) | ||
| .join(" • ")} | ||
| </th> | ||
| </tr> | ||
| )} | ||
| <tr> | ||
| <th /> | ||
| {currentSalahTimes.map((value, index) => ( | ||
| <th | ||
| key={index} | ||
| className={cn( | ||
| "min-w-[10px] w-24", | ||
| nextPrayerTime.today && | ||
| nextPrayerTime.prayerIndex === value.prayerIndex | ||
| ? "bg-mosqueBrand-primaryAlt text-mosqueBrand-onPrimary rounded-t-md" | ||
| : "", | ||
| )} | ||
| > | ||
| {value.label} | ||
| </th> | ||
| ))} | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <th className={"text-right text-gray-400 font-medium pr-2"}> | ||
| Begins | ||
| </th> | ||
| {currentSalahTimes.map((value, index) => ( | ||
| <td | ||
| key={index} | ||
| className={cn( | ||
| "min-w-[10px] w-24", | ||
| nextPrayerTime.today && | ||
| nextPrayerTime.prayerIndex === value.prayerIndex | ||
| ? "bg-mosqueBrand-primaryAlt text-mosqueBrand-onPrimary" | ||
| : "", | ||
| )} | ||
| > | ||
| {value.start ? convertTime(value.start) : ""} | ||
| </td> | ||
| ))} | ||
| </tr> | ||
| <tr> | ||
| <th className={"text-right text-gray-400 font-medium pr-2"}> | ||
| Jama'ah | ||
| </th> | ||
|
|
||
| {currentSalahTimes.map((value, index) => ( | ||
| <td | ||
| key={index} | ||
| className={cn( | ||
| "min-w-[10px] w-24", | ||
| nextPrayerTime.today && | ||
| nextPrayerTime.prayerIndex === value.prayerIndex | ||
| ? "bg-mosqueBrand-primaryAlt text-mosqueBrand-onPrimary rounded-b-md" | ||
| : "", | ||
| )} | ||
| > | ||
| {value.congregation ? convertTime(value.congregation) : ""} | ||
| </td> | ||
| ))} | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix typo in comment.
The comment contains a typo: "local" should be "locale".
🔎 Proposed fix
📝 Committable suggestion
🤖 Prompt for AI Agents