FEAT: Grayscale past prayer (#285)

* FEAT: Grayscale past prayer

* CHORE: Move prayerTitle to props

* FIX: Handle theme light

package.json

@@ -33,11 +33,11 @@
 		"prettier-plugin-svelte": "^3.2.7",
 		"schema-dts": "^1.1.2",
 		"sitemaps": "^2.0.6",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.0.5",
 		"tailwindcss": "^3.4.14",
 		"tslib": "^2.8.0",
 		"typescript": "^5.6.3",
-		"vite": "^5.4.9"
+		"vite": "^5.4.10"
 	},
 	"type": "module",
 	"packageManager": "[email protected]",
@@ -46,8 +46,9 @@
 		"pnpm": "^9.12.2"
 	},
 	"dependencies": {
-		"tw-colors": "^3.3.2",
+		"dayjs": "^1.11.13",
 		"firebase": "^11.0.1",
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"tw-colors": "^3.3.2"
 	}
 }

src/lib/PrayerTimeCard.svelte

@@ -1,28 +1,52 @@
 <script lang="ts">
 	import CardShadow from './CardShadow.svelte';
-	import type { PrayerTimings } from './types';
+	import type { PrayerKey, PrayerTimings } from './types';
+  import dayjs from 'dayjs';
+  import relativeTime from "dayjs/plugin/relativeTime";
+  import duration from "dayjs/plugin/duration";
+  import 'dayjs/locale/id'
+	import { onMount } from 'svelte';
 
-	const TITLE_MAP = {
-		Fajr: 'Subuh',
-		Dhuhr: 'Dzuhur',
-		Asr: 'Ashar',
-		Maghrib: 'Maghrib',
-		Isha: 'Isya'
-	};
+	import { activeTheme } from '../store';
 
+  dayjs.locale('id')
+  dayjs.extend(relativeTime);
+  dayjs.extend(duration);
 	interface Props {
 		timings?: PrayerTimings | null;
-		prayerKey?: 'Fajr' | 'Dhuhr' | 'Asr' | 'Maghrib' | 'Isha';
+		prayerKey: PrayerKey;
+    prayerTitle: string
 	}
 
-	let { timings = null, prayerKey = 'Fajr' }: Props = $props();
+	let { timings = null, prayerKey, prayerTitle = '' }: Props = $props();
+	let isPast: boolean = $state(false);
+	let durationText: string = $state('');
+
+	onMount(async () => {
+    const now = dayjs();
+    const timeStr = `${timings?.[prayerKey] || ''}`.substring(0, 5);
+
+    const prayerTime = dayjs(`${now.format('YYYY-MM-DD')} ${timeStr}`, 'YYYY-MM-DD HH:mm');
+
+    const diffTime = prayerTime.diff(now, 'minute');
+    isPast = diffTime < 0;
+    durationText = dayjs.duration(diffTime, "minutes").humanize(true);
+	});
+
 </script>
 
 {#if timings}
-	<CardShadow>
-		<div class="flex justify-between items-center gap-2">
-			<span>{TITLE_MAP[prayerKey]}</span>
-			<span>{timings[prayerKey]}</span>
+	<CardShadow class={`${isPast ? $activeTheme === 'light' ? '!bg-gray-400' : 'grayscale' : ''}`}>
+		<div class="flex justify-between gap-2 relative">
+      <div>
+        <p>{prayerTitle}</p>
+      </div>
+      <div>
+        <p>{timings[prayerKey]}</p>
+        {#if !isPast}
+          <small>{durationText}</small>
+        {/if}
+      </div>
 		</div>
 	</CardShadow>
 {/if}

src/lib/PrayerTimeList.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import PrayerTimeCard from "./PrayerTimeCard.svelte";
+	import type { PrayerKey, PrayerTimings } from "./types";
+
+	interface Props {
+		timings?: PrayerTimings | null;
+	}
+
+  const PRAYER_LIST: Array<{
+    key: PrayerKey;
+    title: string;
+  }> = [{
+    key: 'Fajr',
+    title: 'Subuh'
+  }, {
+    key: 'Dhuhr',
+    title: 'Dzuhur'
+  }, {
+    key: 'Asr',
+    title: 'Ashar'
+  }, {
+    key: 'Maghrib',
+    title: 'Maghrib'
+  }, {
+    key: 'Isha',
+    title: 'Isya'
+  }];
+
+	let { timings = null }: Props = $props();
+</script>
+
+{#each PRAYER_LIST as prayer (prayer.key)}
+  <PrayerTimeCard timings={timings} prayerKey={prayer.key} prayerTitle={prayer.title} />
+{/each}

src/lib/types.ts

@@ -73,3 +73,5 @@ export interface PrayerMetaMethod {
 export interface PrayerMetaParams {
 	shafaq: string;
 }
+
+export type PrayerKey = 'Fajr' | 'Dhuhr' | 'Asr' | 'Maghrib' | 'Isha'

src/routes/jadwal-sholat/+page.svelte

@@ -16,7 +16,7 @@
 	import type { PrayerTimeData, PrayerTimeResponse } from '$lib/types';
 	import Clock from '$lib/Clock.svelte';
 	import { toast } from '../../store/toast';
-	import PrayerTimeCard from '$lib/PrayerTimeCard.svelte';
+	import PrayerTimeList from '$lib/PrayerTimeList.svelte';
 
 	const BASE_URL = 'https://api.aladhan.com/v1/calendar';
 	let prayerTimes: PrayerTimeData[] = $state([]);
@@ -52,9 +52,9 @@
 		localStorage.setItem(CONSTANTS.STORAGE_KEY.PRAYER, JSON.stringify(response));
 	}
 
-	async function fetchPrayerTime({ latitude, longitude }: { latitude: number; longitude: number }) {
+	async function fetchPrayerTime({ latitude, longitude, checkCache }: { latitude: number; longitude: number; checkCache: boolean }) {
 		const fromStorage = localStorage.getItem(CONSTANTS.STORAGE_KEY.PRAYER);
-		if (fromStorage) {
+		if (checkCache && fromStorage) {
 			const parsedValue = JSON.parse(fromStorage);
 			// check current month is still the same
 			prayerTimes = parsedValue?.data || [];
@@ -121,7 +121,8 @@
 
 				await fetchPrayerTime({
 					latitude: position.coords.latitude,
-					longitude: position.coords.longitude
+					longitude: position.coords.longitude,
+          checkCache: false,
 				});
 			});
 		}
@@ -132,7 +133,8 @@
 			if ($settingLocation?.lg && $settingLocation.lg) {
 				await fetchPrayerTime({
 					latitude: $settingLocation.lt,
-					longitude: $settingLocation.lg
+					longitude: $settingLocation.lg,
+          checkCache: true,
 				});
 			}
 		}, 1000);
@@ -187,11 +189,7 @@
 		<Clock />
 	</div>
 	{#if todayPrayerTime}
-		<PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Fajr" />
-		<PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Dhuhr" />
-		<PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Asr" />
-		<PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Maghrib" />
-		<PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Isha" />
+    <PrayerTimeList timings={todayPrayerTime.timings} />
 	{:else}
 		{#each [1, 2, 3, 4, 5] as item}
 			<CardShadow>

static/README.md

@@ -70,6 +70,7 @@ V1 can be viewed in [`v1`](https://github.com/mazipan/baca-quran.id/tree/v1) bra
 - [Ramadhan Icon Pack from Flaticon](https://www.flaticon.com/packs/ramadan-31)
 - [Recite alquran vectors by Vecteezy](https://www.vecteezy.com/free-vector/recite-alquran)
 - [Ramadhan with man and woman by freepik](https://www.freepik.com/free-vector/ramadan-with-man-woman-praying_7372126.htm)
+- محمد الحراق, CC BY-SA 4.0 <https://creativecommons.org/licenses/by-sa/4.0>, via Wikimedia Commons
 
 ## Support me
 
@@ -84,13 +85,10 @@ Copyright © 2018 by Irfan Maulana
 
 ## Contributors
 
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+Thanks goes to these wonderful people
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 
-<!-- prettier-ignore -->
-<table><tr><td align="center"><a href="https://mazipan.space/"><img src="https://avatars0.githubusercontent.com/u/7221389?v=4" width="100px;" alt="Irfan Maulana"/><br /><sub><b>Irfan Maulana</b></sub></a><br /><a href="https://github.com/mazipan/baca-quran.id/commits?author=mazipan" title="Code">💻</a> <a href="#maintenance-mazipan" title="Maintenance">🚧</a></td><td align="center"><a href="http://altera.id"><img src="https://avatars2.githubusercontent.com/u/8231792?v=4" width="100px;" alt="azul"/><br /><sub><b>azul</b></sub></a><br /><a href="https://github.com/mazipan/baca-quran.id/issues?q=author%3Aazulkipli" title="Bug reports">🐛</a></td></tr></table>
+[![Contributors](https://contrib.rocks/image?repo=mazipan/baca-quran.id)](https://github.com/mazipan/baca-quran.id/graphs/contributors)
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!