From 85aac98d1e42734c5653e35f89c31773d06cd30e Mon Sep 17 00:00:00 2001 From: Irfan Maulana Date: Thu, 31 Oct 2024 09:53:10 +0700 Subject: [PATCH 1/2] FEAT: Add log prayer MVP --- scripts/routes.js | 3 +- src/lib/PrayerTimeCard.svelte | 15 +-- src/lib/constants.ts | 12 +- src/lib/utils/array.ts | 2 + src/lib/utils/date.ts | 40 +++++++ src/routes/+layout.svelte | 11 +- src/routes/+page.svelte | 4 + src/routes/pencatat-ibadah/+page.svelte | 149 ++++++++++++++++++++++++ src/routes/sync/+page.svelte | 18 ++- src/store/index.ts | 15 +++ 10 files changed, 252 insertions(+), 17 deletions(-) create mode 100644 src/lib/utils/array.ts create mode 100644 src/lib/utils/date.ts create mode 100644 src/routes/pencatat-ibadah/+page.svelte diff --git a/scripts/routes.js b/scripts/routes.js index 7f2374443c..64e6555e72 100644 --- a/scripts/routes.js +++ b/scripts/routes.js @@ -15,5 +15,6 @@ export const staticUrls = [ '/sync/', '/tahlil/', '/tasbih/', - '/wirid/' + '/wirid/', + '/pencatat-ibadah/' ]; diff --git a/src/lib/PrayerTimeCard.svelte b/src/lib/PrayerTimeCard.svelte index d0cad6e332..2f84e494ce 100644 --- a/src/lib/PrayerTimeCard.svelte +++ b/src/lib/PrayerTimeCard.svelte @@ -1,17 +1,12 @@ diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 564a033350..6fc137156c 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -29,7 +29,8 @@ export const CONSTANTS = { LAST_VERSES: 'vres', LOCATION: 'loc', PRAYER: 'pryr', - THEME: 'theme' + THEME: 'theme', + LOG_PRAYER: 'log' }, BISMILLAH: '﷽' }; @@ -80,6 +81,9 @@ export const META_DESC_TASBIH = `Tasbih online, mempermudah menghitung Dzikirmu export const META_TITLE_JADWAL_SHOLAT = `Jadwal sholat | ${TITLE_CONSTANTS.TITLE_META}`; export const META_DESC_JADWAL_SHOLAT = `Jadwal sholat sesuai lokasi 💯 gratis, ❌ tanpa iklan, ❌ tanpa analitik`; +export const META_TITLE_PENCATAT_IBADAH = `Pencatat Ibadah | ${TITLE_CONSTANTS.TITLE_META}`; +export const META_DESC_PENCATAT_IBADAH = `Pencatat Ibadah ${postfix(false)}`; + export const META_TITLE_SURAH = (name: string) => `Qur'an Surat ${name} | ${TITLE_CONSTANTS.TITLE_META}`; export const META_DESC_SURAH = (name: string) => `Qur'an Surat ${name} ${postfix(true)}`; @@ -91,6 +95,7 @@ export const META_TITLE_AYAH = ( translation?: string ) => `QS ${surahid}:${verseid}, Surat ${name} - ${translation}, Ayat ${verseid || 1} | ${TITLE_CONSTANTS.TITLE_META}`; + export const META_DESC_AYAH = ( verseid: string, surahid?: string, @@ -117,7 +122,8 @@ export type PageVariant = | 'TASBIH' | 'MAKKIYAH' | 'MADANIYAH' - | 'JADWAL_SHOLAT'; + | 'JADWAL_SHOLAT' + | 'CATAT_IBADAH'; export const SEO_TEXT = { ALL_SURAH: @@ -142,6 +148,8 @@ export const SEO_TEXT = { 'Tasbih online, mempermudah menghitung Dzikirmu. Langsung dari peramban, tanpa iklan, tanpa analitik, privasi aman dan gratis sepenuhnya.', JADWAL_SHOLAT: 'Jadwal sholat terlengkap. Langsung dari peramban, tanpa iklan, tanpa analitik, privasi aman dan gratis sepenuhnya.', + CATAT_SHOLAT: + 'Jadwal sholat terlengkap. Langsung dari peramban, tanpa iklan, tanpa analitik, privasi aman dan gratis sepenuhnya.', SURAH_DETAIL: '', AYAT_DETAIL: '' }; diff --git a/src/lib/utils/array.ts b/src/lib/utils/array.ts new file mode 100644 index 0000000000..57a494b138 --- /dev/null +++ b/src/lib/utils/array.ts @@ -0,0 +1,2 @@ +export const range = (start: number, stop: number, step = 1) => + Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step) diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts new file mode 100644 index 0000000000..3564f28e44 --- /dev/null +++ b/src/lib/utils/date.ts @@ -0,0 +1,40 @@ +import dayjs from 'dayjs'; +import relativeTime from "dayjs/plugin/relativeTime"; +import duration from "dayjs/plugin/duration"; +import 'dayjs/locale/id' + +dayjs.locale('id') +dayjs.extend(relativeTime); +dayjs.extend(duration); + +export const getDayjs = () => { + return dayjs(); +}; + +export const getDayjsFormatted = (dateString: string, format: string) => { + return dayjs(dateString, format) +}; + +export const getDayInMonth = (dateString: string) => { + return dayjs(dateString).daysInMonth() +}; + +export const getMonthName = () => { + return dayjs().format('MMMM') +}; + +export const getCurrentDate = () => { + return dayjs().toDate().getDate(); +}; + +export const formatDate = (date: string, format: string) => { + return dayjs(date).format(format); +}; + +export const formatYYYYMMDD = (date: string) => { + return dayjs(date).format('YYYY-MM-DD'); +}; + +export const getMinuteDuration = (diffTime: number) => { + return dayjs.duration(diffTime, "minutes").humanize(true); +}; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9f416953db..1b5eefadb0 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -12,7 +12,8 @@ settingAutoNext, pinnedSurah, lastReadVerses, - settingLocation + settingLocation, + logPrayer, } from '../store'; import '../app.css'; @@ -85,6 +86,14 @@ } else { settingLocation.set(null); } + + const storageLogPrayer = localStorage.getItem(CONSTANTS.STORAGE_KEY.LOG_PRAYER); + if (storageLogPrayer) { + const parsedValue = JSON.parse(storageLogPrayer); + logPrayer.set(parsedValue); + } else { + settingLocation.set(null); + } } } }); diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f3d1d604fb..2c754bb988 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -45,6 +45,10 @@ { href: '/jadwal-sholat/', title: '⏰ Jadwal Sholat' + }, + { + href: '/pencatat-ibadah/', + title: '⏺️ Pencatat Ibadah' } ]; diff --git a/src/routes/pencatat-ibadah/+page.svelte b/src/routes/pencatat-ibadah/+page.svelte new file mode 100644 index 0000000000..52d6f2709d --- /dev/null +++ b/src/routes/pencatat-ibadah/+page.svelte @@ -0,0 +1,149 @@ + + + + + + +
+

⏺️ Pencatat Ibadah

+
+ +
+ +
+ +
+

Catatan ibadah pada {selectedDateFormatted}

+
+ {#each dayRanges as day (day)} + + {/each} +
+
+ {#each PRAYER_LIST as prayer (prayer.key)} + + + + + {/each} +
+
+ + diff --git a/src/routes/sync/+page.svelte b/src/routes/sync/+page.svelte index f25f392515..e446e3de1b 100644 --- a/src/routes/sync/+page.svelte +++ b/src/routes/sync/+page.svelte @@ -38,7 +38,8 @@ activeTheme, settingLocation, lastReadVerses, - pinnedSurah + pinnedSurah, + logPrayer, } from '../../store'; import { toast } from '../../store/toast'; import { CONSTANTS, TITLE_CONSTANTS } from '$lib/constants'; @@ -140,7 +141,8 @@ district: 'N/A' }, [CONSTANTS.STORAGE_KEY.LAST_VERSES]: [], - [CONSTANTS.STORAGE_KEY.PINNED_SURAH]: [] + [CONSTANTS.STORAGE_KEY.PINNED_SURAH]: [], + [CONSTANTS.STORAGE_KEY.LOG_PRAYER]: {} }; } }; @@ -155,7 +157,8 @@ [CONSTANTS.STORAGE_KEY.THEME]: $activeTheme || '', [CONSTANTS.STORAGE_KEY.LOCATION]: $settingLocation || null, [CONSTANTS.STORAGE_KEY.LAST_VERSES]: $lastReadVerses || null, - [CONSTANTS.STORAGE_KEY.PINNED_SURAH]: $pinnedSurah || null + [CONSTANTS.STORAGE_KEY.PINNED_SURAH]: $pinnedSurah || null, + [CONSTANTS.STORAGE_KEY.LOG_PRAYER]: $logPrayer || null }; const dbRef = collection(db, 'progress'); const q = query(dbRef, where('uid', '==', currentUser?.uid)); @@ -273,6 +276,15 @@ ); } + // log prayer + if (data?.[CONSTANTS.STORAGE_KEY.LOG_PRAYER]) { + logPrayer.set(data?.[CONSTANTS.STORAGE_KEY.LOG_PRAYER]); + localStorage.setItem( + CONSTANTS.STORAGE_KEY.LOG_PRAYER, + JSON.stringify(data?.[CONSTANTS.STORAGE_KEY.LOG_PRAYER] || []) + ); + } + currentRemoteProgress = doc.data(); } }); diff --git a/src/store/index.ts b/src/store/index.ts index 31c2aab771..ec2ee79e41 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -53,3 +53,18 @@ export type BookmarkVerseItem = { }; export const lastReadVerses = writable([]); + +export type LogPrayerItemKey = '1' | '2' | '3' | '4' | '5'; +export type LogPrayerItemValue = 1 | 0; +export type LogPrayerValue = Record; +/** + * Key is date in YYYYMMDD format + * Value is record { id: 1 | 0 } + * ID is ==> 1: Fajr, 2: Dhuhr, 3: Asr, 4: Maghrib, 5: Isha + */ +export type LogPrayer = Record; + +export const logPrayer = writable({}); +export const getLogPrayer = () => { + return get(logPrayer); +}; From 4b1acae3b8b1c05e395e6aa07d7236ed08485422 Mon Sep 17 00:00:00 2001 From: Irfan Maulana Date: Thu, 31 Oct 2024 10:01:57 +0700 Subject: [PATCH 2/2] FEAT: Add active state in date selection --- .env.production | 9 --------- .github/workflows/deploy.yml | 2 +- src/routes/pencatat-ibadah/+page.svelte | 4 ++-- 3 files changed, 3 insertions(+), 12 deletions(-) delete mode 100644 .env.production diff --git a/.env.production b/.env.production deleted file mode 100644 index c6a0ff437a..0000000000 --- a/.env.production +++ /dev/null @@ -1,9 +0,0 @@ -PUBLIC_FIREBASE_API_KEY= -PUBLIC_FIREBASE_AUTH_DOMAIN= -PUBLIC_FIREBASE_PROJECT_ID= -PUBLIC_FIREBASE_STORAGE_BUCKET= -PUBLIC_FIREBASE_MESSAGING_SENDER_ID= -PUBLIC_FIREBASE_APP_ID= -PUBLIC_FIREBASE_MEASUREMENT_ID= - -PUBLIC_FEEDBACK_FISH_PROJECT_ID= diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 9ff6303b0e..6e63cf727d 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -92,7 +92,7 @@ jobs: run: | echo "> Start remove unused files..." rm -rf .github/workflows .svelte-kit markdowns screenshoot scripts static src node_modules - rm -rf .all-contributorsrc .editorconfig .eslintignore .eslintrc.cjs .gitignore .kodiak.toml .npmrc .prettierignore .prettierrc package.json pnpm-lock.yaml postcss.config.js svelte.config.js tailwind.config.js tsconfig.json vite.config.ts .env.example .env.production .nvmrc + rm -rf .all-contributorsrc .editorconfig .eslintignore .eslintrc.cjs .gitignore .kodiak.toml .npmrc .prettierignore .prettierrc package.json pnpm-lock.yaml postcss.config.js svelte.config.js tailwind.config.js tsconfig.json vite.config.ts .env.example .nvmrc echo "> Copy build directory..." cp -r build/. ./ diff --git a/src/routes/pencatat-ibadah/+page.svelte b/src/routes/pencatat-ibadah/+page.svelte index 52d6f2709d..b00c3bfc29 100644 --- a/src/routes/pencatat-ibadah/+page.svelte +++ b/src/routes/pencatat-ibadah/+page.svelte @@ -114,10 +114,10 @@

Catatan ibadah pada {selectedDateFormatted}

-
+
{#each dayRanges as day (day)}